我正在关注youtube上的一个Netflix克隆教程，大约6个月前发布。在项目的这个阶段，我们使用的扩展名为Stripe（用于安全的在线支付）。教程让我做的是创建一个useEffect函数，该函数将查询Firebase/Firestore数据库中的条带数据。我的Firebase/Firestore已经填充了客户和产品。我认为问题是Firebase/Firestore，REACT.js等在本教程发布后所做的任何更改都可能导致useEffect函数逻辑中断-它似乎不再工作。
下面是包含代码块的js文件：

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 get = async () => {
            const q = query(collection(db, 'products'), where("active", "==", true));
            const querySnapshot = await getDocs(q);

            querySnapshot.forEach((doc) => {
                console.log(doc.id, "=>", doc.data());
            });

            setProducts(products);
        };

        get();
    }, [products]);

    console.log(products);

    return (
        <div className='plansScreen'>

        </div>
    )
}

export default PlansScreen

有几个人帮我得到了这么多，它确实记录了控制台中产品集合的数据供我查看。
这说明我的Firebase连接良好。下面是我对Firestore数据库结构的最佳解释：

Firestore-root
    |
    --- customers(collections)
    |           |
    |            --- customersId (document)               
    |                              |
    |                                --- email: "xxxxxxxxx"
    |                              |
    |                                --- stripeId: "xxxxxxxxx"
    |                              |
    |                                --- stripeLink: "xxxxxxxx" 
    |
    --- products(collections)
               |
               --- ProductId (document)
             
                      |
                      --- prices (collection)
                      |               |
                      |              --- priceId (document)
                      |                      |
                      |                     --- //Other price properties
                      |
                      |
                     --- //Other product properties

我的useEffect函数当前记录来自产品集合的信息。我没有看到来自价格集合的任何信息。
我正在遵循一个教程，什么放在Youtube上约6个月前，但教师使用的逻辑似乎不再工作。以下是教师使用：

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

    useEffect(() => {

      db.collection("products")
      .where("active", "==", true)
      .get()
      .then((querySnapshot) => {
         const products = {};
         querySnapshot.forEach(async (productDoc) => {
           products[productDoc.id] = productDoc.data();
           const priceSnap = await productDoc.ref.collection
           ("prices").get();
           priceSnap.docs.forEach((price) => {
             products[productDoc.id].prices = {
             priceId; price.id,
             priceData: price.data(),
            };
            });
            });
            setProducts(products);
        });
    }, []);

    console.log(products);

讲师提供的代码块似乎也不再起作用了。我可以大致理解这一代码块的逻辑。讲师希望useEffect函数查询products集合，并从每个产品文档创建一个产品对象。每个产品都有定价信息，因此useEffect函数也应该将正确价格文档中的数据添加到每个产品文档中。
我试图彻底与我的解释，希望这使因为和乡亲可以指出我在正确的方向。