Firebase v9调用productDoc.ref.collection报not a function错误求助

数据老陈

2026-10-4

问题原因

Firebase v9 采用模块化API设计，不再支持旧版的ref.collection()链式调用写法，你需要使用顶层导出的collection()函数来构造子集合引用。另外你的代码还存在几个可修复的问题：

productDoc.data()是同步方法，不需要加await
forEach中直接使用异步函数会导致快照更新回调执行完毕后，异步获取价格的逻辑还没跑完，setProducts触发时数据不完整
查询价格后返回的QuerySnapshot遍历属性是docs不是doc

修正后代码

import { collection, query, where, onSnapshot, getDocs } from "firebase/firestore";
// 其余导入逻辑保持不变

useEffect(() => {
  const q = query(collection(db, "products"), where("active", "==", true));
  const unsub = onSnapshot(q, async (querySnapshot) => {
    const products = {};
    // 包装所有文档的异步处理逻辑，统一等待执行完成
    const productPromises = querySnapshot.docs.map(async (productDoc) => {
      const productData = productDoc.data();
      // 用顶层collection方法构造prices子集合引用，父级引用作为第一个参数传入
      const priceCol = collection(productDoc.ref, "prices");
      const priceSnap = await getDocs(priceCol);
      // 可根据业务逻辑调整是取第一个价格还是遍历所有价格
      if (!priceSnap.empty) {
        const price = priceSnap.docs[0];
        productData.price = {
          priceId: price.id,
          priceData: price.data()
        };
      }
      products[productDoc.id] = productData;
    });
    // 所有产品价格查询完成后再更新状态
    await Promise.all(productPromises);
    setProducts(products);
  });
  // 组件卸载时取消监听避免内存泄漏
  return () => unsub();
}, []);