React中Firestore数据仅修改代码后才加载的问题排查

1. 异步操作未正确等待（最常见原因） #

你的代码大概率在遍历主集合文档获取子集合时，没有等待所有异步请求完成就更新了状态。比如用forEach遍历异步函数时，forEach不会等待内部的await执行完成，导致状态更新时数据还没被填充，初始加载自然为空；而热重载时组件重新执行，之前的异步请求可能已完成，所以能显示数据。

修复代码示例：

import { useState, useEffect } from 'react';
import { getDocs, collection } from 'firebase/firestore';
import { db } from './firebaseConfig'; // 你的Firebase配置文件

function OSList() {
  const [oses, setOses] = useState([]);

  useEffect(() => {
    const loadOSData = async () => {
      try {
        // 获取主集合oses的所有文档
        const osesSnapshot = await getDocs(collection(db, 'oses'));
        
        // 遍历每个文档，并行发起子集合请求
        const osDataPromises = osesSnapshot.docs.map(async (osDoc) => {
          const childrenSnapshot = await getDocs(collection(osDoc.ref, 'children'));
          const children = childrenSnapshot.docs.map(childDoc => ({
            id: childDoc.id,
            ...childDoc.data()
          }));
          return {
            id: osDoc.id,
            ...osDoc.data(),
            children
          };
        });

        // 等待所有子集合请求完成后再更新状态
        const fullOSData = await Promise.all(osDataPromises);
        setOses(fullOSData);
      } catch (error) {
        console.error('加载操作系统数据失败:', error);
      }
    };

    loadOSData();
  }, []);

  return (
    <div>
      {oses.map(os => (
        <div key={os.id}>
          <h3>{os.name}</h3>
          <ul>
            {os.children.map(child => (
              <li key={child.id}>{child.version}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

export default OSList;

2. 组件挂载时机与认证状态不匹配 #

如果你的Firestore安全规则要求用户认证后才能读取数据，但数据加载逻辑在用户登录完成前就执行了，会导致读取失败。热重载时用户可能已处于登录状态，所以能正常加载数据。

解决办法：
监听用户认证状态，在登录完成后再执行数据加载：

import { onAuthStateChanged } from 'firebase/auth';
import { auth } from './firebaseConfig';

useEffect(() => {
  const unsubscribeAuth = onAuthStateChanged(auth, async (user) => {
    if (user) {
      // 用户已登录，执行数据加载逻辑
      await loadOSData();
    } else {
      // 用户未登录，清空数据或提示
      setOses([]);
    }
  });

  return () => unsubscribeAuth();
}, []);

3. 缺少错误捕获 #

数据加载过程中可能存在网络错误、权限错误等，但代码未捕获这些错误，导致无法定位问题。在异步函数中添加try-catch，可以在控制台查看具体错误信息。

4. Firestore安全规则限制 #

检查你的Firestore安全规则，确保允许读取oses集合及其子集合children。比如开发环境下允许所有用户读取（生产环境需调整为符合业务的权限规则）：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /oses/{osId} {
      allow read: if true;
      match /children/{childId} {
        allow read: if true;
      }
    }
  }
}

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