Firestore嵌套快照/查询无法填充列表数据问题咨询

你遇到的核心问题是forEach不支持异步等待。当你在forEach里用async/await时，forEach会直接跳过异步操作继续执行后续代码，不会等内部的getDoc请求完成。所以当你执行setData的时候，所有的list.push都还没跑完，list自然是空的。

把forEach换成map生成Promise数组，再用Promise.all等待所有异步请求完成，之后再更新state。另外，onSnapshot的回调不能直接标记为async，但你可以在回调内部定义一个async函数并调用，同时别忘了清理监听避免内存泄漏。

修改后的代码：

const [data, setData] = useState<DataType>();
useEffect(() => {
  const docRef = doc(firestore, "/collection/documentId123");
  // 保存监听 unsubscribe 函数，用于组件卸载时清理
  const unsubscribe = onSnapshot(docRef, async (docSnapshot) => {
    const docData = docSnapshot.data();
    if (!docData?.listField) {
      // 处理 listField 为空的情况
      setData({
        title: docData?.title,
        otherField: docData?.otherField,
        list: []
      });
      return;
    }

    // 用 map 生成 Promise 数组，每个Promise对应一个getDoc请求
    const listPromises = docData.listField.map(async (docRef2: DocumentReference) => {
      const doc2 = await getDoc(docRef2);
      return {
        id: docRef2.id,
        field: doc2.get("field"),
      };
    });

    // 等待所有请求完成，得到填充后的list
    const list = await Promise.all(listPromises);

    setData({
      title: docData.title,
      otherField: docData.otherField,
      list: list,
    });
  });

  // 组件卸载时取消监听
  return () => unsubscribe();
}, []);

• map + Promise.all：map会把每个DocumentReference转换成一个Promise（对应getDoc的异步操作），Promise.all会等待所有Promise都resolve后，返回完整的结果数组，这时候list才是填充好的。
• 清理监听：onSnapshot会返回一个unsubscribe函数，一定要在useEffect的返回值里调用，避免组件卸载后仍有监听导致内存泄漏。
• 空值处理：增加了对docData?.listField的判断，避免当listField不存在时出现错误。

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