Next.js Server Component触发无限循环，栈溢出错误求助

报错根源 #

你遇到的无限循环和栈溢出错误，核心原因是服务器组件直接返回了Firestore的QuerySnapshot对象。这类对象内部存在循环引用（比如包含对Firestore实例、原始查询的关联引用），Next.js在序列化服务器组件返回数据、传递给客户端组件的过程中，无法处理这种循环结构，会触发递归的字符串替换操作，直到调用栈耗尽，抛出RangeError: Maximum call stack size exceeded。

解决方案 #

服务器组件返回给客户端的数据必须是可JSON序列化的纯JavaScript对象，不能直接返回Firestore的快照实例。修改服务器组件的getBenchmarksByUser函数，将文档快照转换为包含ID和数据的普通对象：

修改后的服务器组件代码 #

'use server'
import { db } from "@/lib/firebase";
import { query, getDocs, collection, orderBy, limit } from "firebase/firestore";

export async function getBenchmarksByUser(uid) {
    console.log("server uid", uid);
    const benchmarksQuery = query(collection(db, `users/${uid}/benchmarks`), orderBy('created'), limit(5));
    const benchmarkDocs = await getDocs(benchmarksQuery);
    
    console.log("benchmarks", benchmarkDocs.docs.length);
    // 将每个文档转换为纯JS对象，保留id和文档数据
    return benchmarkDocs.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
    }));
}

补充说明 #

客户端组件的逻辑本身没有问题，但需要确保user.uid是稳定值（不会频繁变化），避免不必要的useEffect触发。核心规则始终是：服务器与客户端之间传递的数据必须是可JSON序列化的基础类型或普通对象，Firestore的快照、实例等复杂对象都不符合要求，必须先转换为普通对象再返回。

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