JavaScript异步数据加载与嵌套对象属性访问：解决undefined难题

useEffect(() => {
  // ... 其他初始化代码 ...

  const q = query(collection(db, "products"), where("active", "==", true));
  getDocs(q).then((querySnapshot) => {
    const products = {}; // 局部变量，用于构建产品数据
    querySnapshot.forEach(async (doc) => { // 注意：forEach 不会等待内部的 async 函数完成
      products[doc.id] = doc.data(); // 赋值产品基本数据
      const priceSnapshot = await getDocs( // 异步获取价格
        collection(db, "products", doc.id, "prices")
      );
      priceSnapshot.forEach((price) => {
        products[doc.id].prices = { // 赋值价格数据
          priceId: price.id,
          priceData: price.data(),
        };
      });
    });
    setProducts(products); // ⚠️ 潜在问题：此处可能过早执行
  });
}, []);

import React, { useState, useEffect } from 'react';
import { Container, Row, Col, Card, Button, Spinner } from 'react-bootstrap';
import { loadStripe } from '@stripe/stripe-js';
import { collection, query, where, getDocs, doc, addDoc, onSnapshot } from 'firebase/firestore';
import { db } from '../firebase'; // 假设你的firebase实例在这里

// 假设useAuth和currentUser也已定义
const useAuth = () => ({ currentUser: { uid: 'someUserId' } });

export default function Subscription() {
  const [loading, setLoading] = useState(false);
  const [products, setProducts] = useState({}); // 初始状态为空对象
  const { currentUser } = useAuth();
  const [stripe, setStripe] = useState(null);

  useEffect(() => {
    const initializeStripe = async () => {
      const stripeInstance = await loadStripe(
        process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY
      );
      setStripe(stripeInstance);
    };

    initializeStripe();

    const fetchProductsWithPrices = async () => {
      const q = query(collection(db, "products"), where("active", "==", true));
      const querySnapshot = await getDocs(q);

      // 使用 Promise.all 和 map 来等待所有产品的价格数据加载完成
      const productPromises = querySnapshot.docs.map(async (doc) => {
        const productData = doc.data();
        const productId = doc.id;

        const priceSnapshot = await getDocs(
          collection(db, "products", productId, "prices")
        );

        let priceInfo = null;
        if (!priceSnapshot.empty) {
          // 假设每个产品只有一个价格，或者我们只取第一个
          const priceDoc = priceSnapshot.docs[0];
          priceInfo = {
            priceId: priceDoc.id,
            priceData: priceDoc.data(),
          };
        }

        return {
          [productId]: {
            ...productData,
            prices: priceInfo, // 将价格信息添加到产品对象中
          },
        };
      });

      // 等待所有产品及其价格数据加载完成
      const loadedProductsArray = await Promise.all(productPromises);

      // 将数组转换为对象形式，以便于按ID访问
      const finalProducts = loadedProductsArray.reduce((acc, current) => {
        return { ...acc, ...current };
      }, {});

      setProducts(finalProducts);
    };

    fetchProductsWithPrices();

  }, []); // 依赖数组为空，只在组件挂载时执行一次

  async function loadCheckOut(priceId) {
    setLoading(true);
    const usersRef = doc(collection(db, "users"), currentUser.uid);
    const checkoutSessionRef = collection(usersRef, "checkout_sessions");

    const docRef = await addDoc(checkoutSessionRef, {
      price: priceId,
      trial_from_plan: false,
      success_url: window.location.origin,
      cancel_url: window.location.origin,
    });

    onSnapshot(docRef, (snap) => {
      const { error, sessionId } = snap.data();
      if (error) {
        alert(`An error occurred: ${error.message}`);
      }

      if (sessionId && stripe) {
        stripe.redirectToCheckout({ sessionId });
      }
    });
  }

  return (
    <>
      <Container className="mt-4 mb-4">
        <h1 className="text-center mt-4">Choose Your Plan</h1>
        <Row className="justify-content-center mt-4">
          {Object.entries(products).map(([productId, productData]) => {
            // 现在 productData.prices 应该是有值的，如果价格存在
            console.log("Product Data:", productData);
            console.log("Product Prices:", productData.prices);

            return (
              <Col md={4} key={productId}>
                <Card>
                  <Card.Header className="text-center">
                    <h5>{productData.name}</h5>
                    {/* 确保价格数据存在才显示 */}
                    <h5>
                      {productData.prices?.priceData?.unit_amount ?
                        `$${(productData.prices.priceData.unit_amount / 100).toFixed(2)} / ${productData.prices.priceData.interval}`
                        : '价格待定'}
                    </h5>
                  </Card.Header>
                  <Card.Body>
                    <h6>{productData.description}</h6>
                    <Button
                      // 使用可选链操作符 ?. 安全访问 priceId
                      onClick={() => loadCheckOut(productData?.prices?.priceId)}
                      variant="primary"
                      block
                      disabled={loading || !productData.prices?.priceId} // 如果没有价格ID，禁用按钮
                    >
                      {loading ? (
                        <>
                          <Spinner
                            animation="border"
                            size="sm"
                            className="mr-2"
                          />
                          Loading...
                        </>
                      ) : (
                        "Subscribe"
                      )}
                    </Button>
                  </Card.Body>
                </Card>
              </Col>
            );
          })}
        </Row>
      </Container>
    </>
  );
}