如何在NextJS中实现Firestore集合的关联查询（替代SQL JOIN）

问题背景 #

Firestore中存在users和anuncios两个集合：

• users集合包含用户信息，核心字段为uid（用户唯一标识）
• anuncios集合包含广告信息，核心字段为createdBy（存储创建该广告的用户uid）

需要在应用中为每条广告显示对应的创建者名称，但NoSQL不支持SQL的JOIN查询，尝试了批量获取数据的方案后，仍无法将创建者名称与对应uid正确关联。

原尝试代码（更新后） #

const [anuncios, setAnuncios] = useState([])
const [creators, setCreators] = useState({})
const [loading, setLoading] = useState(true)

const db = getFirestore(app);

useEffect(() => {

    const getAnuncios = async () => {
        // Fetch Anuncios
        const itemsRef = query(collection(db, 'anuncios'))
        const querySnapshot = await getDocs(itemsRef)
        // Array of creator UIDs
        const creatorUids = [...new Set(querySnapshot.docs.map(doc => doc.data().createdBy))]
        //console.log(creatorUids)
        const creatorDocs = await Promise.all(creatorUids.map(uid => getDoc(doc(db, 'users', uid))))
        //console.log(creatorDocs)
        // Store creators data in a Map
        const creators = creatorDocs.reduce((acc, doc) => ({ ...acc, [doc.id]: doc.data() }), {})
        //console.log(creators)
        // Update state after creators data is fetched
        setAnuncios(querySnapshot.docs.map(doc => ({ ...doc.data(), id: doc.id })))
        setCreators(creators)
        console.log(creators)

        anuncios.map(anuncio => (
            console.log(anuncio),
            console.log(creators[anuncio.createdBy]?.name)
        ))
    }

    getAnuncios()
}, [])

问题分析 #

1. 异步状态更新的误区：在setAnuncios后立刻遍历anuncios状态变量，此时React尚未完成状态更新，拿到的是旧的空数组，自然无法关联数据。
2. 用户文档匹配可能错误：如果users集合的文档ID不等于uid字段，用getDoc(doc(db, 'users', uid))会查询错误的文档，导致拿不到正确的用户信息。

修正后的解决方案 #

第一步：确认users集合结构 #

先明确users集合的存储方式：

• 情况1：文档ID等于用户uid（推荐方式，通常通过setDoc(doc(db, 'users', user.uid), {...})创建）
• 情况2：文档ID为自动生成，uid存储在文档字段中

第二步：修正数据获取逻辑 #

const [anuncios, setAnuncios] = useState([]);
const [creators, setCreators] = useState({});
const [loading, setLoading] = useState(true);

const db = getFirestore(app);

useEffect(() => {
  const getAnuncios = async () => {
    try {
      // 1. 获取所有广告数据
      const anuncioRef = query(collection(db, 'anuncios'));
      const anuncioSnapshot = await getDocs(anuncioRef);
      
      // 2. 提取所有唯一的创建者UID，避免重复请求
      const creatorUids = [...new Set(anuncioSnapshot.docs.map(doc => doc.data().createdBy))];
      
      // 3. 批量获取用户数据（根据users集合结构二选一）
      let creatorDocs;
      // --- 情况1：users文档ID等于uid ---
      creatorDocs = await Promise.all(
        creatorUids.map(uid => getDoc(doc(db, 'users', uid)))
      );
      
      // --- 情况2：users文档ID为自动生成，uid在字段中 ---
      // creatorDocs = await Promise.all(
      //   creatorUids.map(uid => getDocs(query(collection(db, 'users'), where('uid', '==', uid))))
      // );
      
      // 4. 将用户数据整理为以uid为键的映射对象
      const creatorsMap = creatorDocs.reduce((acc, doc) => {
        // 情况1的处理
        if (doc.exists()) {
          acc[doc.id] = doc.data();
        }
        
        // 情况2的处理
        // const userDoc = doc.docs[0];
        // if (userDoc?.exists()) {
        //   const userData = userDoc.data();
        //   acc[userData.uid] = userData;
        // }
        
        return acc;
      }, {});
      
      // 5. 更新状态（此时无需立刻遍历状态，渲染时再关联）
      setAnuncios(anuncioSnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })));
      setCreators(creatorsMap);
    } catch (error) {
      console.error('数据获取失败：', error);
    } finally {
      setLoading(false);
    }
  };

  getAnuncios();
}, []);

第三步：渲染时关联数据 #

if (loading) {
  return <div>加载中...</div>;
}

return (
  <div>
    {anuncios.map(anuncio => (
      <Link href='/' key={anuncio.id}>
        <div>
          <h3>{anuncio.title}</h3>
          <p>创建者：{creators[anuncio.createdBy]?.name || '未知用户'}</p>
          {/* 其他广告内容 */}
        </div>
      </Link>
    ))}
  </div>
);

关键修正说明 #

• 避免异步状态的即时访问：React状态更新是异步的，不要在setState后立刻依赖状态变量做操作，渲染阶段直接使用最新状态即可。
• 匹配正确的用户文档：根据users集合的实际存储结构选择对应的查询方式，确保能拿到正确的用户数据。
• 安全访问用户数据：使用可选链操作符?.和默认值|| '未知用户'，避免因用户数据不存在导致的页面报错。

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