NextJS组件出现InternalError: too much recursion错误求助

核心问题原因 #

1. Firebase返回对象的循环引用：生产环境下，Firebase Realtime Database的snapshot.val()返回的对象可能带有内部循环引用（SDK生产优化导致的隐藏属性），直接存入React State后，生产环境的React渲染/序列化逻辑遍历该对象时触发无限递归，抛出InternalError: too much recursion。
2. 不必要的双向同步循环：第二个useEffect在data每次变化时都写回Firebase，包括初始从Firebase拉取数据后的更新，这会导致数据刚获取就被重复写入，加剧递归问题（本地开发环境的宽松处理掩盖了这个问题）。

解决方案 #

方案1：清理Firebase返回的数据 #

将获取到的数据转换为纯JSON对象，消除可能的循环引用：
修改index.js中的第一个useEffect：

useEffect(() => {
  console.log("Data Fetched!");
  get(child(dbref, "data/"))
    .then((snapshot) => snapshot.val())
    .then((d) => {
      if (d) {
        // 转换为无循环引用的纯JSON对象
        const cleanData = JSON.parse(JSON.stringify(d));
        setData(cleanData);
      }
    })
    .catch((e) => console.error(e));
}, []);

方案2：优化数据写入逻辑，避免无效同步 #

移除监听data变化的useEffect，只在用户主动修改数据时才写回Firebase：

1. 在index.js中定义专门的Firebase更新函数：

const updateDataToFirebase = (newData) => {
  set(child(dbref, "data/"), newData).catch((e) => console.error(e));
};

2. 将该函数传给Subject组件：

{timeline[day].map((e) => (
  <Subject 
    key={e} 
    name={e} 
    data={data} 
    setData={setData} 
    date={date}
    updateDataToFirebase={updateDataToFirebase}
  />
))}

3. 修改Subject.jsx中的按钮点击逻辑，更新State后手动触发Firebase写入：

function todayTaken() {
  const newData = {
    ...data,
    [date]: { ...data[date], [name]: 1 },
  };
  setData(newData);
  updateDataToFirebase(newData);
}

function notTaken() {
  const newData = {
    ...data,
    [date]: { ...data[date], [name]: 0 },
  };
  setData(newData);
  updateDataToFirebase(newData);
}

function Cancelled() {
  const newData = {
    ...data,
    [date]: { ...data[date], [name]: -1 },
  };
  setData(newData);
  updateDataToFirebase(newData);
}

4. 删除index.js中的第二个useEffect：

// 移除这个无效的同步逻辑
// useEffect(() => {
//   console.log("Data Updated!");
//   set(child(dbref, "data/"), data).catch((e) => console.error(e));
// }, [data]);

本地与生产环境差异说明 #

本地开发环境下，React的开发模式对State对象做了宽松处理，且Firebase SDK的开发版本没有添加生产环境的隐藏属性，因此递归问题不会暴露；而生产环境的代码压缩、严格的对象遍历逻辑会触发完整的递归检查，导致错误显现。

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