在React useEffect中使用Firebase onSnapshot为何触发无限循环？是否为最佳实践？

为什么会触发无限循环？ #

这段代码必然会触发无限循环，核心原因如下：

• useEffect的依赖数组里包含了状态变量weightsHistorySnapshot
• 在onSnapshot的回调中，你调用setWeightsHistorySnapshot(docsSnap.docs)更新了这个状态
• 状态更新会触发组件重新渲染，同时因为依赖项weightsHistorySnapshot发生变化，useEffect会再次执行
• 重新执行后又会创建新的快照订阅，回调再次更新状态，如此往复形成无限循环

最佳实践调整方案 #

1. 移除不必要的依赖项
   把weightsHistorySnapshot从依赖数组中删掉，useEffect的依赖只需要保留影响集合引用的变量：currentRoutine.name和session?.user?.id。只有当这两个值变化时，才需要重新创建订阅。调整后的代码：

   useEffect(() => {
     // 先做空值检查，避免非空断言带来的潜在错误
     if (!session?.user?.id) return;
     
     const routineRef = collection(db, "routines", session.user.id, currentRoutine.name);
     const unsubscribe = onSnapshot(routineRef, (docsSnap) => {
       setWeightsHistorySnapshot(docsSnap.docs);
       console.log("Current data: ", docsSnap.docs);
     });
     return () => unsubscribe();
   }, [currentRoutine.name, session?.user?.id]);
   

2. 规避非空断言的风险
   原代码里的session?.user?.id!用了非空断言，如果session或user为null/undefined，会直接抛出错误。建议先做空值判断，符合条件再执行订阅逻辑，提升代码健壮性。

3. 可选：优化状态更新粒度
   如果docsSnap.docs的引用频繁变化但内容未改，可以考虑提取文档的实际数据而非直接存储docs对象，比如：

   setWeightsHistorySnapshot(docsSnap.docs.map(doc => ({
     id: doc.id,
     ...doc.data()
   })));
   

   这样能减少不必要的组件重渲染，属于优化项，可根据实际业务场景选择是否使用。

内容的提问来源于stack exchange，提问作者Furkan Öztürk