React JS结合Firebase开发刷新页面后学生集合数据消失是什么原因

问题根因 #

• 学生列表对应的useEffect依赖数组为空，未将user.uid加入依赖。页面刷新后组件首次渲染时，Firebase Auth状态尚未完成初始化，此时你用来创建estudiantesRef的user.uid实际为初始值null/undefined，监听器绑定在了无效的集合路径上，自然拿不到数据。后续Auth加载完成user.uid更新后，由于依赖数组为空，useEffect不会重新执行，也就不会绑定新的正确监听器，因此学生数据刷新后为空。
• 图书列表查询的是无需用户权限的公共libros集合，不依赖用户状态，所以无论何时绑定监听器都能正常获取数据，不会出现刷新丢失的问题。
• 你两个集合的监听器都没有加取消订阅的清理逻辑，组件卸载或依赖更新时旧监听器仍在运行，多个集合同时加载时很容易出现竞态问题，旧请求的返回结果会覆盖正确的状态，也是你同时加载多个集合才会触发问题的原因。

修复方案 #

1. 调整学生列表代码，将user.uid加入useEffect依赖数组，同时增加监听器清理逻辑，避免无效监听和竞态问题：

const [estudiantes, setEstudiantes] = useState([]);

useEffect(() => {
  // 先判断用户状态加载完成再执行查询
  if (!user?.uid) return;
  const estudiantesRef = db.collection("usuarios").doc(user.uid).collection("estudiantes")
  // 接收onSnapshot返回的取消订阅函数
  const unsubscribe = estudiantesRef.onSnapshot(snapshot => {
    const tempData = [];
    snapshot.forEach((doc) => {
      const data = doc.data();
      tempData.push(data);
    });
    setEstudiantes(tempData);
  })
  // 组件卸载/依赖更新时取消旧监听
  return unsubscribe;
}, [user?.uid]); // 加入用户uid作为依赖

console.log(user.uid)
console.log(estudiantes)

2. 同步给图书列表也增加清理逻辑，避免潜在的内存泄漏和竞态问题：

const [productos, setProductos] = useState([]);

useEffect(() => {
    const productosRef = db.collection('libros');
    const unsubscribe = productosRef
    .orderBy('grado')
    .onSnapshot( snapshot => {
        const tempData = [];
        snapshot.forEach((doc) => {
          const data = doc.data();
          tempData.push(data);
        });
        setProductos(tempData);
    })
    return unsubscribe;
}, []);

如果刷新后仍会短暂显示空列表，可以在Auth状态未完成初始化时展示加载占位符，优化用户体验。

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