React中如何通过Firestore获取多个ID对应的用户详情并存入状态

原代码的核心问题 #

1. 异步操作未等待：在map里直接调用onSnapshot（异步操作），但map不会等待异步请求完成就返回，导致setList拿到的不是用户数据，而是一堆未完成的Promise。
2. 实时监听误用：如果只是一次性获取用户详情，用onSnapshot属于资源浪费——它是用来实时监听数据变化的，一次性获取用get()足够。
3. 未处理并发请求：多个用户详情请求并行发起，但你没等待所有请求完成就更新状态，自然只能拿到单个数据。

修正后的一次性获取代码 #

db.collection("Users").doc(auth.uid).collection("Posts").get()
  .then(async (postsSnapshot) => {
    // 提取所有需要查询的好友ID，去重避免重复查询同一用户
    const friendIds = [...new Set(postsSnapshot.docs.map(doc => doc.data().frd_id))];
    
    // 为每个ID发起用户详情查询，收集所有异步请求Promise
    const userRequests = friendIds.map(frdId => 
      db.collection('Users').where("id", "==", frdId).get()
        .then(userSnap => userSnap.docs[0]?.data()) // ID唯一，直接取第一个文档的数据
    );
    
    // 等待所有请求完成，拿到全部用户数据
    const allFriends = await Promise.all(userRequests);
    
    // 过滤掉可能不存在的用户数据（避免null值干扰）
    const validFriends = allFriends.filter(friend => friend);
    
    // 统一更新状态
    setList(validFriends);
  })
  .catch(err => console.error("数据获取失败:", err));

如果需要实时监听用户详情变化 #

要是你需要实时同步好友的信息（比如好友修改昵称），可以用下面的代码，给每个用户单独设置监听：

db.collection("Users").doc(auth.uid).collection("Posts").get()
  .then((postsSnapshot) => {
    const friendIds = [...new Set(postsSnapshot.docs.map(doc => doc.data().frd_id))];
    let currentFriends = [];

    friendIds.forEach(frdId => {
      db.collection('Users').where("id", "==", frdId).onSnapshot(userSnap => {
        const userData = userSnap.docs[0]?.data();
        if (!userData) return;

        // 检查用户是否已在列表中，存在则更新，不存在则新增
        const existingIndex = currentFriends.findIndex(f => f.id === frdId);
        if (existingIndex !== -1) {
          currentFriends[existingIndex] = userData;
        } else {
          currentFriends.push(userData);
        }

        // 触发状态更新，解构数组保证是新引用，触发React重渲染
        setList([...currentFriends]);
      });
    });
  })
  .catch(err => console.error("数据获取失败:", err));

关键优化说明 #

• Promise.all：批量异步请求的核心，确保所有请求完成后再统一更新状态，避免数据不全的问题。
• 去重处理：用Set对好友ID去重，减少Firestore请求次数，提升性能。
• 错误捕获：添加catch块处理请求失败的情况，避免前端报错崩溃。

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