React应用中如何从Firestore的playgrounds集合获取关联solutions的数据？

1. 确认数据关联结构 #

首先要保证playgrounds集合的每个文档都包含一个关联字段（比如solutionId），用来存储对应solutions文档的ID。示例结构：

• solutions/{solutionDocId}：主解决方案文档
• playgrounds/{playgroundDocId}：包含字段solutionId: "solutionDocId"，明确关联到对应的主解决方案

2. 使用Firebase SDK执行查询 #

根据业务场景选择以下两种查询方式：

方式一：实时监听（适合需要实时同步数据的场景） #

import { useEffect, useState } from 'react';
import { db } from './firebaseConfig'; // 你的Firebase配置文件
import { collection, query, where, onSnapshot } from 'firebase/firestore';

const getAssociatedPlaygrounds = (solutionId) => {
  const [playgrounds, setPlaygrounds] = useState([]);

  useEffect(() => {
    // 构建查询：筛选出与目标solutionId匹配的playgrounds文档
    const q = query(
      collection(db, 'playgrounds'),
      where('solutionId', '==', solutionId)
    );

    // 实时监听查询结果，数据更新时自动同步组件状态
    const unsubscribe = onSnapshot(q, (querySnapshot) => {
      const docs = [];
      querySnapshot.forEach((doc) => {
        docs.push({ id: doc.id, ...doc.data() });
      });
      setPlaygrounds(docs);
    });

    // 组件卸载时取消监听，避免内存泄漏
    return () => unsubscribe();
  }, [solutionId]);

  return playgrounds;
};

// 组件中使用示例
const SolutionDetail = ({ solutionId }) => {
  const playgrounds = getAssociatedPlaygrounds(solutionId);

  return (
    <div>
      <h3>关联的多语言解决方案</h3>
      {playgrounds.map((pg) => (
        <div key={pg.id}>
          <p>语言：{pg.language}</p>
          {/* 渲染解决方案内容等其他字段 */}
        </div>
      ))}
    </div>
  );
};

方式二：一次性获取（适合静态内容展示场景） #

import { collection, query, where, getDocs } from 'firebase/firestore';
import { db } from './firebaseConfig';
import { useEffect, useState } from 'react';

const fetchAssociatedPlaygrounds = async (solutionId) => {
  const q = query(
    collection(db, 'playgrounds'),
    where('solutionId', '==', solutionId)
  );

  const querySnapshot = await getDocs(q);
  return querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
};

// 组件中使用示例
const SolutionDetail = ({ solutionId }) => {
  const [playgrounds, setPlaygrounds] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadData = async () => {
      const data = await fetchAssociatedPlaygrounds(solutionId);
      setPlaygrounds(data);
      setLoading(false);
    };
    loadData();
  }, [solutionId]);

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

  return (
    <div>
      <h3>关联的多语言解决方案</h3>
      {playgrounds.map((pg) => (
        <div key={pg.id}>
          <p>语言：{pg.language}</p>
          {/* 渲染解决方案内容等其他字段 */}
        </div>
      ))}
    </div>
  );
};

3. 关键注意事项 #

• 调整Firestore安全规则，确保允许读取playgrounds集合，示例规则：

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /playgrounds/{document} {
        allow read: if request.auth != null; // 根据实际需求设置权限，比如仅登录用户可读取
      }
    }
  }
  

• 如果你的关联字段不是solutionId，替换成实际使用的字段名即可。

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