Next.js与MongoDB集成时表单数据提交为Undefined该怎么解决

在Next.js项目中集成MongoDB实现表单数据存储时，表单提交后后端接收到Undefined是开发过程中非常常见的问题，这个问题会直接导致数据无法正确写入数据库，影响业务功能的正常实现。

问题出现的常见场景

通常整个流程分为前端表单提交、Next.js API路由接收请求、连接MongoDB写入数据三个环节，任何一个环节处理不当都可能出现Undefined的问题。下面我们先看一个基础的表单提交示例，再逐步分析可能的问题点。

前端表单提交代码示例

前端使用原生表单配合fetch提交数据，代码如下：

// 前端页面组件代码
import { useState } from 'react';

export default function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await fetch('/api/submit-form', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
      });
      const data = await res.json();
      if (data.success) {
        alert('提交成功');
      }
    } catch (err) {
      console.error('提交失败:', err);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>姓名：</label>
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>邮箱：</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>留言：</label>
        <textarea
          name="message"
          value={formData.message}
          onChange={handleChange}
        ></textarea>
      </div>
      <button type="submit">提交</button>
    </form>
  );
}

常见导致Undefined的原因及解决方案

1. 前端未正确设置请求头或序列化数据

如果前端提交时没有设置Content-Type为application/json，或者没有用JSON.stringify处理数据，后端就无法正确解析请求体，导致获取到的数据是Undefined。

上面的示例代码中已经正确设置了请求头和序列化数据，如果你之前遗漏了这两步，补充后就可以解决这类问题。

2. Next.js API路由未正确解析请求体

Next.js 13及以上版本的App Router中，API路由的请求体解析方式和之前的Pages Router不同，如果处理不当就会拿到Undefined。下面分别给出两种路由模式的解决方案。

Pages Router下的API路由处理

Pages Router中默认会自动解析application/json类型的请求体，代码如下：

// pages/api/submit-form.js
import { connectToDatabase } from '../../lib/mongodb';

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ success: false, message: '仅支持POST请求' });
  }
  try {
    // 直接获取解析后的请求体
    const { name, email, message } = req.body;
    console.log('接收到的表单数据:', name, email, message); // 这里如果打印Undefined就是解析失败
    if (!name || !email || !message) {
      return res.status(400).json({ success: false, message: '表单字段不能为空' });
    }
    const { db } = await connectToDatabase();
    const result = await db.collection('messages').insertOne({
      name,
      email,
      message,
      createTime: new Date()
    });
    return res.status(200).json({ success: true, data: result });
  } catch (err) {
    console.error('处理请求失败:', err);
    return res.status(500).json({ success: false, message: '服务器错误' });
  }
}

App Router下的API路由处理

App Router中需要手动解析请求体，代码如下：

// app/api/submit-form/route.js
import { connectToDatabase } from '../../../lib/mongodb';
import { NextResponse } from 'next/server';

export async function POST(request) {
  try {
    // 手动解析JSON请求体
    const body = await request.json();
    const { name, email, message } = body;
    console.log('接收到的表单数据:', name, email, message);
    if (!name || !email || !message) {
      return NextResponse.json({ success: false, message: '表单字段不能为空' }, { status: 400 });
    }
    const { db } = await connectToDatabase();
    const result = await db.collection('messages').insertOne({
      name,
      email,
      message,
      createTime: new Date()
    });
    return NextResponse.json({ success: true, data: result });
  } catch (err) {
    console.error('处理请求失败:', err);
    return NextResponse.json({ success: false, message: '服务器错误' }, { status: 500 });
  }
}

3. MongoDB连接或数据写入逻辑错误

如果请求体解析正常，但写入MongoDB时还是出现问题，可能是连接逻辑或者集合操作有误。下面是通用的MongoDB连接工具代码：

// lib/mongodb.js
import { MongoClient } from 'mongodb';

const uri = process.env.MONGODB_URI;
const options = {
  useUnifiedTopology: true,
  useNewUrlParser: true
};

let client;
let clientPromise;

if (!uri) {
  throw new Error('请在环境变量中配置MONGODB_URI');
}

if (process.env.NODE_ENV === 'development') {
  // 开发环境下复用连接
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options);
    global._mongoClientPromise = client.connect();
  }
  clientPromise = global._mongoClientPromise;
} else {
  // 生产环境每次创建新连接
  client = new MongoClient(uri, options);
  clientPromise = client.connect();
}

export async function connectToDatabase() {
  const client = await clientPromise;
  const db = client.db(process.env.MONGODB_DB_NAME);
  return { db, client };
}

需要确保在.env.local文件中正确配置了环境变量：

MONGODB_URI=mongodb://127.0.0.1:27017/next-form-db
MONGODB_DB_NAME=next-form-db

问题排查步骤

如果还是出现Undefined的问题，可以按照以下步骤排查：

• 先在前端提交时打印formData，确认前端数据是正确的
• 在API路由中打印req.body（Pages Router）或者body（App Router），确认请求体解析正常
• 检查MongoDB连接是否正常，是否有写入权限
• 确认表单的name属性和后端接收的字段名完全一致，大小写也要匹配

总结

Next.js与MongoDB集成时表单数据提交为Undefined的问题，大多出现在请求体解析和路由处理逻辑上，只要按照前端正确序列化数据、对应路由模式正确解析请求体、规范MongoDB连接操作的流程处理，基本都可以解决这类问题。开发过程中多打日志排查每个环节的数据状态，能更快定位问题根源。

Next.jsMongoDB表单数据提交Undefined问题API路由修改时间：2026-07-07 18:12:36