页面刷新时Firebase Realtime Database无法加载数据的问题排查

问题根源 #

刷新页面时，你的数据请求会失败，核心原因是用户认证状态初始化晚于数据请求：

• 组件挂载时，user的初始值是空对象，此时执行获取数据的useEffect，user.uid为undefined，导致请求的数据库路径变成//dreams，这个路径下自然没有数据，触发snapshot.exists() === false，打印"No Data"。
• 页面切换时，user已经通过onAuthStateChanged完成初始化，user.uid存在，请求路径正确，所以能正常加载数据。

修复方案 #

1. 修正数据请求的依赖与触发时机 #

将user加入数据请求的useEffect依赖数组，同时在请求前校验用户是否已完成认证：

useEffect(() => {
  // 未完成认证时直接返回，避免无效请求
  if (!user?.uid) return;

  const dbRef = ref(getDatabase());
  
  get(child(dbRef, `/${user.uid}/dreams`)).then(snapshot => {
    if (snapshot.exists()){
      const dreams = snapshot.val();
      // 一次性设置所有数据，避免多次调用setState
      setUserDreams(Object.values(dreams));
    } else {
      console.log('No Data');
      // 无数据时清空状态，避免残留旧数据
      setUserDreams([]);
    }
  }).catch(err => {
    console.error(err);
  });
}, [user]); // 依赖user，认证状态更新时自动重新请求

2. 优化数据库结构（可选但推荐） #

你当前的dreams是数组嵌套对象的结构：

"dreams" : [{"RANDOM_UUID" : {...}}]

这种结构在Firebase Realtime Database中容易引发并发冲突，更推荐将dreams设为键值对对象：

"dreams" : {
  "RANDOM_UUID1" : {...},
  "RANDOM_UUID2" : {...}
}

这样Object.values(dreams)可以直接拿到所有梦境数据，无需额外处理数组嵌套的对象。如果坚持原有结构，需要调整数据解析逻辑：

// 适配数组嵌套对象的结构
const dreamList = Object.values(dreams).map(item => Object.values(item)[0]);
setUserDreams(dreamList);

3. 避免状态累积问题 #

原代码中用forEach循环调用setUserDreams(prev => [...prev, dream])，会导致页面切换时重复添加数据。直接用setUserDreams(Object.values(dreams))可以一次性覆盖状态，避免数据冗余。

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