NextJS TypeScript中Mongoose连接MongoDB遇未定义属性设置错误

核心错误分析 #

触发该错误的直接原因是数据库连接文件中的循环导入，同时存在连接逻辑不规范、前后端数据传递不匹配等问题，叠加Turbopack的兼容性特性导致异常。

分步解决方案 #

1. 修复数据库连接文件的循环导入与逻辑优化 #

原app/utils/db.ts中第一行导入自身的代码是循环引用的根源，同时需要优化连接逻辑避免重复连接：

// app/utils/db.ts
import mongoose from "mongoose";
import endpointsConfig from '@/endpoints.config';

const uri = endpointsConfig.mongoUri?.toString() ?? '';

const connect = async () => {
  // 避免重复连接：Mongoose会缓存连接状态
  if (mongoose.connection.readyState === 1 || mongoose.connection.readyState === 2) {
    console.log("已连接或正在连接MongoDB");
    return;
  }

  try {
    await mongoose.connect(uri, {
      dbName: "test" // 明确指定数据库名，避免URL参数解析问题
    });
    console.log("MongoDB连接成功");
  } catch (error) {
    console.error("MongoDB连接失败:", error);
    throw new Error("Connection failed!");
  }
};

export default connect;

• 移除了第一行的循环导入语句import connect from "@/app/utils/db.ts";
• 添加连接状态检查，避免重复调用mongoose.connect
• 明确指定数据库名，增强连接稳定性

2. 修正API路由的数据处理与响应逻辑 #

原app/api/auth/register.ts存在数据接收不匹配、错误处理缺失的问题：

// app/api/auth/register.ts
import connect from "@/app/utils/db";
import { NextResponse } from "next/server";

export const POST = async (req: Request) => {
  try {
    // 匹配前端传递的参数名
    const { formData } = await req.json();
    await connect();

    // 此处可添加用户创建逻辑（示例）
    // import User from "@/models/User";
    // const newUser = new User(formData);
    // await newUser.save();

    return NextResponse.json({ message: "注册成功" }, { status: 201 });
  } catch (error) {
    return NextResponse.json({ message: "注册失败", error: (error as Error).message }, { status: 500 });
  }
};

• 修正了参数接收逻辑，匹配前端传递的formData字段
• 添加完整的try-catch错误处理，返回规范的JSON响应

3. 优化前端表单提交逻辑 #

原前端代码存在响应状态判断无效、错误处理不完整的问题：

// app/components/RegistrationForm.tsx 中的handleSubmit函数
const handleSubmit = async (event: React.FormEvent) => {
  event.preventDefault();
  event.stopPropagation();
  console.log(formData);

  if (formData.email === formData.confirmEmail && formData.password === formData.confirmPassword) {
    try {
      const res = await fetch("/api/auth/register", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ formData }),
      });

      // 正确处理响应状态
      if (!res.ok) {
        const errorData = await res.json();
        throw new Error(errorData.message || "注册请求失败");
      }

      const data = await res.json();
      console.log("注册成功:", data);
      // 可添加注册成功后的页面跳转或状态提示
    } catch (err: any) {
      setError(err.message);
      console.error("注册出错:", err);
    }
  }
};

• 修正了响应状态判断逻辑，主动处理非2xx状态码
• 完善错误信息捕获，将后端返回的错误信息展示给用户

4. Turbopack兼容性处理 #

如果上述修改后仍出现类似错误，尝试：

• 禁用Turbopack，使用传统Webpack构建：运行next dev而非next dev --turbo，Turbopack对部分Node.js库的兼容性仍在完善中
• 升级Mongoose至最新稳定版（如7.6.x），修复已知的构建工具兼容性问题

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