React项目中Firebase/Firestore查询Stripe数据问题求助

跟着6个月前的Netflix克隆教程开发React应用，使用Stripe支付时，因Firebase升级到模块化SDK（v9+），旧教程的命名空间写法失效——目前能正常获取products集合数据，但无法获取每个产品文档下嵌套的prices子集合数据，以下是修正方案：

关键问题分析 #

你的现有代码仅查询了products集合，未处理每个产品对应的prices子集合；同时useEffect依赖项设为[products]会触发无限重渲染，setProducts(products)也未使用新获取的有效数据。

修正后的完整代码 #

import React, { useState, useEffect } from 'react';
import db, { collection, query, where, getDocs } from "../firebase";
import './PlansScreen.css';

function PlansScreen() {
    const [products, setProducts] = useState([]);

    useEffect(() => {
        const fetchProductsWithPrices = async () => {
            // 查询所有激活的产品
            const productsQuery = query(collection(db, 'products'), where("active", "==", true));
            const productsSnapshot = await getDocs(productsQuery);

            // 并行处理每个产品的prices子集合查询
            const productsData = await Promise.all(
                productsSnapshot.docs.map(async (productDoc) => {
                    // 获取产品基础数据
                    const productBaseData = productDoc.data();
                    // 查询当前产品下的prices子集合
                    const pricesSnapshot = await getDocs(collection(db, `products/${productDoc.id}/prices`));
                    // 整理prices数据结构
                    const pricesList = pricesSnapshot.docs.map(priceDoc => ({
                        priceId: priceDoc.id,
                        priceData: priceDoc.data()
                    }));
                    // 返回整合了prices的完整产品对象
                    return {
                        id: productDoc.id,
                        ...productBaseData,
                        prices: pricesList
                    };
                })
            );

            // 更新状态
            setProducts(productsData);
        };

        fetchProductsWithPrices();
    }, []); // 空依赖数组，仅组件挂载时执行一次查询

    console.log(products);

    return (
        <div className='plansScreen'>
            {/* 此处可遍历products渲染套餐及价格信息 */}
        </div>
    )
}

export default PlansScreen

核心改动说明 #

1. 子集合查询逻辑：通过collection(db, \products/${productDoc.id}/prices`)定位到对应产品的prices子集合，用getDocs`获取价格数据。
2. 异步并行处理：用Promise.all等待所有产品的价格查询完成，确保拿到完整数据后再更新状态，避免数据不完整。
3. 修复渲染循环：将useEffect依赖项改为空数组[]，确保仅在组件挂载时执行一次查询，避免无限重渲染。
4. 数据结构整合：把产品ID、基础数据和价格列表整合为统一对象，方便后续页面渲染使用。

额外注意事项 #

• 确保Firestore安全规则允许读取products及products/{productId}/prices集合的数据，否则会出现权限错误。
• 若每个产品仅对应一个价格，可直接取pricesList[0]简化数据结构，根据实际业务调整即可。

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