如何修复TypeError: res.json is not a function错误及MongoDB异常数据问题

错误原因拆解 #

• 你用的是Next.js App Router的API路由，这种路由的POST函数没有res参数，响应需要通过NextResponse对象返回，直接调用res.json()自然会报错。
• 直接使用req.body是错误操作：App Router里的req是NextRequest实例，req.body是可读流对象，不是解析后的JSON数据——这就是MongoDB里出现随机字符文档的原因，你把流对象直接存进数据库了。
• 每次请求都调用mongoose.connect()会导致重复连接问题，应该全局初始化数据库连接。

修复步骤及代码示例 #

1. 修正API路由核心逻辑 #

替换错误的响应方式，正确解析请求体，优化数据库连接：

import { NextResponse, NextRequest } from "next/server";
import wordModel from "../../../models/wordModel";
import mongoose from "mongoose";

// 全局复用数据库连接，避免重复建立连接
async function connectDB() {
  // 检查是否已连接，已连接则直接返回
  if (mongoose.connections[0].readyState) return;
  await mongoose.connect(process.env.MONGO_URI);
}

export async function POST(req) { // 移除无效的res参数
  try{
    await connectDB();
    console.log("数据库连接成功");
    // 解析前端发送的JSON请求体
    const data = await req.json();
    const word = await wordModel.create(data);
    // 用NextResponse返回成功响应
    return NextResponse.json({ word }, { status: 201 });
  } catch(error) {
    console.log("出错了", error);
    // 返回结构化的错误响应
    return NextResponse.json({ error: "数据插入失败" }, { status: 500 });
  }
}

2. 前端代码确认（无需修改） #

你的前端fetch代码逻辑正确，确保data是符合wordModel结构的对象即可：

const response = await fetch("/api/contact", {
    method: "POST",
    body: JSON.stringify(data),
    headers: {
      "Content-Type": "application/json",
    },
});
// 可添加响应处理逻辑
const result = await response.json();
console.log(result);

关键注意事项 #

• App Router的API路由仅接收req参数，响应必须通过NextResponse构造。
• 必须通过await req.json()解析请求体，不能直接使用req.body。
• 数据库连接全局初始化，避免重复调用mongoose.connect()。

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