Firestore引用文档检索问题：React应用订单与餐桌关联查询

开发React订单餐桌管理应用，设置了tables和orders两个Firestore集合，餐桌文档包含orders字段（订单文档引用的数组）。使用onSnapshot监听器获取指定餐桌的订单列表时，仅能得到引用对象，无法获取订单文档的实际数据，同时对当前集合结构的合理性存在疑问。

相关代码 #

添加订单函数：

const addToOrder = async () => {
    try {
      const orderRef = await addDoc(collection(db, "orders/"), menu[0]);
      const tablesRef = await updateDoc(doc(db, `tables/Pieu2dZ6GX9WpVKCU7kY`), {
        orders: arrayUnion(orderRef)
      });    
      console.log("Document written with ID: ", tablesRef);
    } catch (e) {
      console.error("Error adding document: ", e);
    }
  }

监听数据变化代码：

try {
      onSnapshot(doc(db, 'tables/Pieu2dZ6GX9WpVKCU7kY'), async (doc) => {
        console.log("Current data: ", doc.data());
        
      });
    }catch(err) {
      console.log("err:", err)
    }

当前监听器返回的引用对象示例（已脱敏）：

// removed some data to obfuscate config
{
    "converter": null,
    "_key": {
        "path": {
            "segments": [],
            "offset": 5,
            "len": 2
        }
    },
    "type": "document",
    "firestore": {
        "app": {
            "_isDeleted": false,
            "_options": {
            },
            "_config": {
                "name": "[DEFAULT]",
                "automaticDataCollectionEnabled": false
            },
            "_name": "[DEFAULT]",
            "_automaticDataCollectionEnabled": false,
            "_container": {
                "name": "[DEFAULT]",
                "providers": {}
            }
        },
        "databaseId": {
            "projectId": "oats-e82ae",
            "database": "(default)"
        },
        "settings": {
            "host": "firestore.googleapis.com",
            "ssl": true,
            "ignoreUndefinedProperties": false,
            "cacheSizeBytes": 41943040,
            "experimentalForceLongPolling": false,
            "experimentalAutoDetectLongPolling": false,
            "useFetchStreams": true
        }
    }
}

一、获取关联的订单文档数据 #

Firestore不会自动解析文档引用，需要手动对每个引用调用get()获取实际数据。以下是两种实现方式：

1. 一次性获取订单数据（非实时） #

修改监听代码，批量获取所有关联订单：

try {
  onSnapshot(doc(db, 'tables/Pieu2dZ6GX9WpVKCU7kY'), async (tableDoc) => {
    const tableData = tableDoc.data();
    if (tableData?.orders?.length) {
      // 并行获取所有订单文档，提升性能
      const orderDocs = await Promise.all(
        tableData.orders.map(orderRef => orderRef.get())
      );
      // 提取订单ID和数据
      const orders = orderDocs.map(doc => ({ id: doc.id, ...doc.data() }));
      console.log("餐桌及关联订单数据:", { ...tableData, orders });
    } else {
      console.log("当前餐桌无订单", tableData);
    }
  });
} catch(err) {
  console.log("监听错误:", err)
}

2. 实时监听订单变化 #

如果需要实时同步订单的更新，需为每个订单引用单独添加onSnapshot监听，并注意在组件卸载时清理监听避免内存泄漏：

import { useEffect } from 'react';

// 在React组件中使用
useEffect(() => {
  // 监听餐桌变化
  const tableUnsubscribe = onSnapshot(doc(db, 'tables/Pieu2dZ6GX9WpVKCU7kY'), async (tableDoc) => {
    const tableData = tableDoc.data();
    if (tableData?.orders?.length) {
      // 先取消之前的订单监听
      if (window.orderUnsubscribes) {
        window.orderUnsubscribes.forEach(unsub => unsub());
      }
      window.orderUnsubscribes = [];
      const orders = [];

      // 为每个订单添加实时监听
      tableData.orders.forEach(orderRef => {
        const unsub = onSnapshot(orderRef, (orderDoc) => {
          const orderIndex = orders.findIndex(o => o.id === orderDoc.id);
          if (orderIndex !== -1) {
            orders[orderIndex] = { id: orderDoc.id, ...orderDoc.data() };
          } else {
            orders.push({ id: orderDoc.id, ...orderDoc.data() });
          }
          console.log("实时更新的订单列表:", orders);
        });
        window.orderUnsubscribes.push(unsub);
      });
    }
  });

  // 组件卸载时清理所有监听
  return () => {
    tableUnsubscribe();
    if (window.orderUnsubscribes) {
      window.orderUnsubscribes.forEach(unsub => unsub());
    }
  };
}, []);

二、集合结构合理性分析 #

当前结构的适用场景 #

你当前的设计（餐桌文档存储订单引用数组）是Firestore中典型的一对多关联模式，适合以下情况：

• 每个餐桌的订单数量较少（Firestore单文档最大限制1MB，数组长度受限）
• 业务逻辑以餐桌为核心，主要从餐桌维度查询订单

建议调整结构的场景 #

如果存在以下情况，建议优化集合结构：

1. 订单数量可能大幅增长：
   在orders集合的每个订单文档中添加tableId字段，存储所属餐桌的ID，通过查询订单集合获取某餐桌的订单：

   // 查询指定餐桌的所有订单
   const querySnapshot = await getDocs(
     query(collection(db, "orders"), where("tableId", "==", "Pieu2dZ6GX9WpVKCU7kY"))
   );
   const orders = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
   

   这种方式避免餐桌文档过大，还支持分页查询，更适合订单数量多的场景。

2. 需要频繁反向查询：
   如果经常需要从订单反向查询所属餐桌，当前结构需要遍历所有餐桌文档查找引用，效率极低。此时在订单中存储tableId是更合理的选择。

总结 #

如果你的订单数量较少，当前结构完全可行；若订单数量多或需要反向查询，建议在订单文档中添加tableId字段，调整为通过订单集合查询关联数据的模式。

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