Next.js获取产品时遇RangeError: Maximum call stack size exceeded求助

问题原因 #

你遇到的栈溢出错误，核心原因是Mongoose文档对象的循环引用：

• Product.find({})返回的是Mongoose的Document实例，这类对象包含大量内部属性（比如__proto__、$__、_doc等），且存在循环引用的结构
• 当你把这种对象直接传给setProducts存入React状态时，React会尝试深度克隆对象以追踪状态变化，遍历过程中触发无限递归，最终导致栈溢出
• 分类功能正常，大概率是分类数据的模型结构更简单，或返回的文档无循环引用的关联字段

修复方案 #

修改服务端的getProducts函数，使用Mongoose的.lean()方法，让查询直接返回普通JavaScript对象，规避循环引用：

export async function getProducts() {
  try {
    connectToDB();
    // 添加.lean()，返回纯JS对象而非Mongoose Document实例
    return await Product.find({}).lean();
  } catch (error: any) {
    throw new Error(`Failed to fetch products : ${error.message}`);
  }
}

如果不想用.lean()，也可以手动将文档转为普通对象：

const products = await Product.find({});
return products.map(doc => doc.toObject());

验证方法 #

可以在客户端打印响应时，先转为JSON字符串验证是否存在循环引用：

console.log('response: ', JSON.stringify(response));

如果这一步报错，就坐实了是对象循环引用的问题。

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