如何通过Express与NextJS正确保存Mongoose数据？仅存_id问题排查

出现这个问题主要有两个核心原因：

1. 表单字段名与后端接收字段完全不匹配 #

你的NextJS表单里，姓名输入框的name属性是first，邮箱输入框的name属性是last，但Express后端代码里却尝试读取req.body.name和req.body.email——两者完全对应不上，导致后端根本拿不到表单提交的姓名和邮箱数据，自然只会存入默认的_id字段。

2. Express未配置表单数据解析中间件 #

默认情况下，Express不会自动解析application/x-www-form-urlencoded格式的表单数据（这是HTML表单默认的提交格式），如果没添加解析中间件，req.body会是空对象，即使字段名匹配也拿不到数据。

修正后的代码示例： #

NextJS 表单代码（修正字段名）

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <form action="http://localhost:2000/register" method="post">
        <label htmlFor="name">Name:</label>
        {/* 把name属性改为name，id与label的for属性对应 */}
        <input type="text" id="name" name="name" />
        <label htmlFor="email">Email</label>
        {/* 把name属性改为email，同时type设为email更规范 */}
        <input type="email" id="email" name="email" />
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

Express 配置与路由代码（添加解析中间件）

首先在Express的主入口文件（比如app.js）中添加表单解析中间件：

const express = require('express');
const app = express();

// 解析urlencoded格式的表单数据
app.use(express.urlencoded({ extended: true }));
// 若需要处理JSON格式请求，可额外添加以下代码
app.use(express.json());

// 挂载路由
const registerRouter = require('./routes/register');
app.use('/', registerRouter);

路由代码保持逻辑不变（现在字段名已匹配）：

router.post('/register', async (req, res) => {
    const user = await User.create({
        name: req.body.name,
        email: req.body.email,
    });
    return res.status(200).json(user);
});

Mongoose Schema 代码（无需修改）

import mongoose from 'mongoose'

const userSchema = new mongoose.Schema({
    name: String,
    email: String,
});

export const User = mongoose.model('User', userSchema);

内容的提问来源于stack exchange，提问作者user18197344