如何引用带有自动生成ID的Firestore子集合？

你当前代码里硬编码了固定的"ID"作为users集合下的文档ID，但实际每个文档ID是addDoc自动生成的，所以核心思路是先获取users集合下的所有文档，再逐个访问它们的personalDetails子集合，以下是具体实现方案：

方式一：合并所有用户的子集合数据（用于表格统一展示） #

import { useState, useEffect } from 'react';
import { collection, getDocs } from 'firebase/firestore';
import { db } from './your-firebase-config'; // 替换成你的Firebase配置文件路径

function HomeQuestion8(){
  const [rows, setRows] = useState([]);

  useEffect(() => {
    const getAllPersonalDetails = async () => {
      // 1. 获取users集合下所有自动生成ID的文档
      const usersSnapshot = await getDocs(collection(db, 'users'));
      const allDetails = [];

      // 2. 遍历每个用户文档，访问对应的personalDetails子集合
      for (const userDoc of usersSnapshot.docs) {
        const subCollectionRef = collection(db, 'users', userDoc.id, 'personalDetails');
        const detailsSnapshot = await getDocs(subCollectionRef);
        
        // 3. 将子集合数据与父文档ID关联，存入数组（可选保留父ID用于溯源）
        detailsSnapshot.docs.forEach(doc => {
          allDetails.push({
            ...doc.data(),
            id: doc.id,
            userId: userDoc.id
          });
        });
      }

      setRows(allDetails);
    };

    getAllPersonalDetails();
  }, []);

  // 表格渲染示例，根据你的实际字段调整
  return (
    <table border="1">
      <thead>
        <tr>
          <th>姓名</th>
          <th>邮箱</th>
          <th>所属用户ID</th>
        </tr>
      </thead>
      <tbody>
        {rows.map(row => (
          <tr key={row.id}>
            <td>{row.name}</td>
            <td>{row.email}</td>
            <td>{row.userId}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default HomeQuestion8;

方式二：按用户分组展示子集合数据 #

如果需要按每个用户单独展示对应的子集合数据，可以用分组结构存储：

import { useState, useEffect } from 'react';
import { collection, getDocs } from 'firebase/firestore';
import { db } from './your-firebase-config';

function HomeQuestion8(){
  const [groupedData, setGroupedData] = useState([]);

  useEffect(() => {
    const getGroupedDetails = async () => {
      const usersSnapshot = await getDocs(collection(db, 'users'));
      const result = [];

      for (const userDoc of usersSnapshot.docs) {
        const detailsSnapshot = await getDocs(collection(db, 'users', userDoc.id, 'personalDetails'));
        const userDetails = detailsSnapshot.docs.map(doc => ({...doc.data(), id: doc.id}));
        
        result.push({
          userId: userDoc.id,
          userInfo: userDoc.data(), // 若users文档本身有数据，可一并获取
          personalDetails: userDetails
        });
      }

      setGroupedData(result);
    };

    getGroupedDetails();
  }, []);

  return (
    <div>
      {groupedData.map(user => (
        <div key={user.userId} style={{marginBottom: '20px', padding: '10px', border: '1px solid #ccc'}}>
          <h4>用户ID：{user.userId}</h4>
          {user.userInfo && <p>用户昵称：{user.userInfo.nickname}</p>}
          <table border="1">
            <thead>
              <tr>
                <th>年龄</th>
                <th>地址</th>
              </tr>
            </thead>
            <tbody>
              {user.personalDetails.map(detail => (
                <tr key={detail.id}>
                  <td>{detail.age}</td>
                  <td>{detail.address}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ))}
    </div>
  );
}

export default HomeQuestion8;

注意事项 #

• 若users集合数据量较大，遍历获取子集合会产生较多读操作，可考虑调整数据结构或使用批量读取优化
• 若需要实时同步数据，可将getDocs替换为onSnapshot监听数据变化
• 确保Firebase安全规则允许读取users集合及personalDetails子集合，否则会触发权限错误

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