Next.js开发Stack Overflow克隆项目遇栈溢出，首页无法展示数据

我正在使用Next.js开发一个Stack Overflow克隆项目，已成功连接服务器组件与数据库模型，且能从数据库获取数据。但在首页尝试展示数据时，遇到错误：RangeError: Maximum call stack size exceeded at String.replace (<anonymous>)。我已仔细检查代码，未发现无限循环或错误导入问题，但问题仍存在。以下是首页展示问题的代码：

import LocalSearchBar from "@/components/shared/search/LocalSearchBar";
import { HomePageFilters } from "@/constants/filters";
import Filter from "@/components/shared/Filter";
import Link from "next/link";

import NoResults from "@/components/shared/NoResults";
import QuestionCard from "@/components/cards/QuestionCard";
import { getQuestions } from "@/lib/actions/question.action";
import HomeFilters from "@/components/home/HomeFilters";

export default async function Home() {
  const result = await getQuestions({});

  return (
    <>
      <div className="flex w-full flex-col-reverse justify-between gap-4 sm:flex-row sm:items-center">
        <h1 className="h1-bold text-dark100_light900">All Question</h1>
        <Link href="/ask-question" className="flex justify-end max-sm:w-full">
          <button className="primary-gradient min-h-[46px] rounded-md px-4 py-3 !text-light-900">
            Ask a Question
          </button>
        </Link>
      </div>
      <div className="mt-11 flex justify-between gap-5 max-sm:flex-col sm:items-center">
        <LocalSearchBar
          route="/"
          iconPosition="right"
          imgSrc="/assets/icon/search.svg"
          placeHolder="Search for questions"
          otherClasses="flex-1"
        />
        <Filter
          filters={HomePageFilters}
          otherClasses="min-h-[56px] sm:min-w-[170px]"
          containerClasses="hidden max-md:flex"
        />
      </div>

      <HomeFilters />

      <div className="mt-10 flex w-full flex-col gap-6">
        {result.questions.length > 0 ? (
          result.questions.map((question) => (
            <QuestionCard
              key={`${question._id}`}
              _id={`${question._id}`}
              title={question.title}
              tags={question.tags}
              upVotes={question.upVotes}
              author={question.author}
              answers={question.answers}
              views={question.views}
              createdAt={question.createdAt}
            />
          ))
        ) : (
          <NoResults
            title="There are no question to show"
            description="Be the first to break the silence! 🚀 Ask a Question and kickstart the discussion. our query could be the next big thing others learn from. Get involved! 💡"
            link="/"
            linkTitle="Ask a Question"
          />
        )}
      </div>
    </>
  );
}

排查与解决方案 #

• 检查QuestionCard组件的递归调用
  该错误最常见的诱因是组件内部出现无限递归渲染。比如QuestionCard是否不小心渲染了自身，或者其子组件触发了重复渲染的逻辑。可以临时将QuestionCard替换为简单占位组件（如仅展示question.title），若错误消失，即可定位问题出在QuestionCard内部。

• 检查getQuestions返回的数据结构
  确认result.questions中的数据是否存在循环引用，例如question.author包含该question的引用，或answers嵌套了父级question对象。这种循环引用会导致React内部处理字符串时触发String.replace无限递归。可在getQuestions中对返回数据做序列化处理，或手动移除循环引用字段。

• 排查其他子组件逻辑
  首页引入的HomeFilters、LocalSearchBar等组件也可能存在无限循环问题。尝试逐个注释这些组件，观察错误是否消失，以此定位问题组件。

• 验证Next.js版本兼容性
  部分Next.js版本在处理服务器组件异步数据时存在潜在递归问题，确保使用最新稳定版Next.js后再测试。

• 添加日志定位循环引用
  在getQuestions获取结果后，添加console.log(JSON.stringify(result.questions))，若JSON序列化失败，说明数据存在循环引用，这就是错误根源。

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