Next.js 13中Mongoose连MongoDB遇topLevelAwait报错求助

问题根源分析 #

你遇到的报错看似和topLevelAwait相关，但核心问题有两个：

1. dbConnect函数中未使用await调用mongoose.connect，导致解构的connection是Promise对象而非实际连接实例，访问readyState会触发错误；
2. 未正确配置Next.js 13的topLevelAwait（若确实需要），且未做连接缓存导致重复连接请求。

分步解决方案 #

1. 正确配置Next.js的topLevelAwait #

在next.config.js中添加webpack实验配置，确保语法支持：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.experiments = {
      topLevelAwait: true,
      ...config.experiments,
    };
    return config;
  },
};

module.exports = nextConfig;

2. 修复并优化dbConnect函数 #

修正await缺失问题，同时添加连接缓存避免重复连接（Mongoose本身会缓存连接，但手动判断更可靠）：

import mongoose from "mongoose";

// 标记连接状态，避免重复发起连接请求
let isConnected = false;

const dbConnect = async () => {
  // 已连接则直接返回，无需重复操作
  if (isConnected) {
    console.log("复用现有数据库连接");
    return;
  }

  try {
    // 必须使用await获取实际连接实例
    const connection = await mongoose.connect(process.env.MONGODB_URI);
    isConnected = connection.readyState === 1;
    console.log("数据库连接成功");
  } catch (error) {
    console.error("数据库连接失败:", error);
    throw error; // 抛出错误以便API路由捕获处理
  }
};

export default dbConnect;

注意：将连接字符串改为从环境变量MONGODB_URI读取，避免硬编码敏感信息（在.env.local中配置MONGODB_URI="你的连接字符串"）。

3. API路由调用验证 #

你的API路由写法本身没问题，但建议添加错误处理：

import dbConnect from "@/database/dbConnect";

export async function GET(request) {
  try {
    await dbConnect();
    return new Response('数据库连接成功！', { status: 200 });
  } catch (error) {
    return new Response('数据库连接失败', { status: 500 });
  }
}

关键注意事项 #

• Next.js 13的App Router中，API路由文件必须命名为route.js，且放在app/api/[路由名]/目录下；
• 确保安装了最新版本的mongoose和next，避免版本兼容问题；
• 环境变量文件.env.local需放在项目根目录，且重启开发服务器后才会生效。

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