在React中高效地从Firestore获取多ID关联数据：异步处理与状态管理

db.collection("Users").doc(auth.uid).collection("Posts").get()
  .then((snapshot) => {
    // 第一次状态更新尝试：在这里调用 setList
    setList(
      snapshot?.docs.map((doc) => {
          // 第二次异步操作：查询好友详情
          db.collection('Users').where("id", "==", doc.data().frd_id).onSnapshot((snapshot) => {
            snapshot?.docs.map((doc) => {
              doc.data() // 这里的 `doc.data()` 无法直接返回给外层的 `map`
            })
          })
          // 问题：setList 在内部的异步查询完成之前就已经执行了
          // 因此，setList 接收到的数据不包含好友详情，或者只包含部分已完成的数据
        )
      })
  })

import React, { useEffect, useState } from 'react';
import { db, auth } from './firebaseConfig'; // 假设已配置并导入Firebase

function UserPostsWithFriendDetails() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchPostsAndFriendDetails = async () => {
      // 确保用户已登录
      if (!auth.currentUser) {
        setLoading(false);
        setError("用户未登录。");
        return;
      }

      try {
        setLoading(true);
        setError(null);

        // 1. 获取当前用户的所有帖子
        const postsSnapshot = await db.collection("Users").doc(auth.currentUser.uid).collection("Posts").get();
        const postsData = postsSnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));

        // 提取所有独特的 frd_id
        const frdIds = [...new Set(postsData.map(post => post.frd_id).filter(Boolean))];

        // 2. 并行获取所有 frd_id 对应的用户详情
        let friendDetailsMap = new Map();
        if (frdIds.length > 0) {
          // Firestore 'in' 查询有10个元素的限制。如果 frdIds 数量超过10，需要分块处理。
          const chunkSize = 10;
          const frdIdChunks = [];
          for (let i = 0; i < frdIds.length; i += chunkSize) {
            frdIdChunks.push(frdIds.slice(i, i + chunkSize));
          }

          // 为每个分块创建 Firestore 查询 Promise
          const friendDetailPromises = frdIdChunks.map(chunk =>
            db.collection('Users').where("id", "in", chunk).get()
          );

          // 使用 Promise.all 等待所有好友详情查询完成
          const friendSnapshots = await Promise.all(friendDetailPromises);

          // 将获取到的好友详情存储到 Map 中，方便后续查找
          friendSnapshots.forEach(snapshot => {
            snapshot.docs.forEach(doc => {
              friendDetailsMap.set(doc.data().id, doc.data());
            });
          });
        }

        // 3. 整合数据并更新状态
        const combinedPosts = postsData.map(post => ({
          ...post,
          friendDetails: friendDetailsMap.get(post.frd_id) || null // 如果没有找到好友详情，则设置为 null
        }));

        setPosts(combinedPosts);

      } catch (err) {
        console.error("获取数据时出错:", err);
        setError("加载帖子和好友详情失败。");
      } finally {
        setLoading(false);
      }
    };

    fetchPostsAndFriendDetails();
  }, [auth.currentUser]); // 依赖项：当用户登录状态改变时重新运行

  if (loading) return <p>加载中...</p>;
  if (error) return <p style={{ color: 'red' }}>错误: {error}</p>;
  if (posts.length === 0) return <p>没有找到任何帖子。</p>;

  return (
    <div>
      <h1>我的帖子及好友详情</h1>
      {posts.map(post => (
        <div key={post.id} style={{ border: '1px solid #eee', borderRadius: '8px', margin: '15px 0', padding: '15px', boxShadow: '0 2px 5px rgba(0,0,0,0.1)' }}>
          <h3>{post.title || '无标题帖子'}</h3> {/* 假设帖子有 title 字段 */}
          <p>{post.content || '无内容'}</p> {/* 假设帖子有 content 字段 */}
          {post.friendDetails ? (
            <div style={{ marginTop: '10px', borderTop: '1px dashed #ddd', paddingTop: '10px' }}>
              <h4>关联好友: {post.friendDetails.name || '未知'}</h4> {/* 假设好友详情有 name 字段 */}
              <p>邮箱: {post.friendDetails.email || 'N/A'}</p> {/* 假设好友详情有 email 字段 */}
              {/* 可以根据需要显示更多好友信息 */}
            </div>
          ) : (
            <p style={{ fontStyle: 'italic', color: '#666' }}>未找到关联好友详情。</p>
          )}
        </div>
      ))}
    </div>
  );
}

export default UserPostsWithFriendDetails;