React使用Firestore onSnapshot与Promise查询多集合数据时state为undefined

• 你调用 snapshot.docs.map 遍历推文时，回调函数没有返回值：内部 Promise.all().then() 里的return只属于该异步回调的返回，没有传递给外层map方法，因此生成的 tweetsMapped 数组天然就是长度匹配、每一项全为undefined的结构。
• 所有推文的用户偏好、头像查询Promise都被塞进了同一个全局数组，没有和对应推文绑定，无法在异步完成后把用户数据回填到对应推文中。
• 最终Promise.all的回调中直接把未拿到异步结果的tweetsMapped传给了setTweets，自然拿不到组合后的完整数据。

useEffect(() => {
  const cancelSuscription = firestore
    .collection('tweets')
    .onSnapshot(async (snapshot) => {
      // 每条推文对应一个独立Promise，异步返回组合后的完整数据
      const tweetPromises = snapshot.docs.map(async (doc) => {
        const tweetBase = {
          text: doc.data().text,
          likes: doc.data().likes,
          email: doc.data().email,
          created: doc.data().created,
          uid: doc.data().uid,
          id: doc.id,
        };

        // 并行查询当前推文对应用户的两个补充集合
        const [userPrefSnapshot, userPhotoSnapshot] = await Promise.all([
          firestore.collection('user_preferences').where('uid', '==', tweetBase.uid).get(),
          firestore.collection('user_photos').where('id', '==', tweetBase.uid).get()
        ]);

        // 空结果兼容，避免查询不到数据时报错
        const authorPref = userPrefSnapshot.empty ? {} : userPrefSnapshot.docs[0].data();
        const authorPhoto = userPhotoSnapshot.empty ? {} : userPhotoSnapshot.docs[0].data();

        // 直接返回组合后的完整推文对象
        return {
          ...tweetBase,
          author: authorPref.username ?? '未知用户',
          authorColor: authorPref.color ?? '#000000',
          authorPhoto: authorPhoto.photoURL ?? '',
        };
      });

      // 等待所有推文的异步查询完成，拿到完整数组后更新state
      const fullTweets = await Promise.all(tweetPromises);
      setTweets(fullTweets);
    });

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

• 用 async/await 简化异步逻辑，避免嵌套回调的上下文丢失问题
• 每条推文对应独立的异步Promise，查询完成后直接返回组合好的完整数据
• 统一等待所有推文的异步逻辑执行完成后，再一次性更新React state
• 新增空查询结果兼容逻辑，避免用户数据缺失时页面报错

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