I encountered an issue when fetching data from firestore. I can't really figure out why isn't there a collection function under productDoc.ref, and would highly appreciate if anyone could help with this.

I'm using the latest version of Firebase, but still have no access to the prices subcollection if i were to follow docs from firebase v9.

useEffect(() => {
  const q = query(collection(db, "products"), where("active", "==", true));
  // console.log(db.collection("products").getDocuments());
  const unsub = onSnapshot(q, (querySnapshot) => {
    const products = {};
    querySnapshot.forEach(async (productDoc) => {
      products[productDoc.id] = await productDoc.data();
      console.log(await productDoc, "ref");

      const priceSnap = await productDoc.ref.collection("prices").get();
      priceSnap.doc.forEach((price) => {
        products[productDoc.id].price = {
          priceId: price.id,
          priceData: price.data(),
        };
      });
    });
    setProducts(products);
  });
}, []);