解决JavaScript对象属性访问“undefined”的异步陷阱

import React, { useState, useEffect } from 'react';
import { loadStripe } from '@stripe/stripe-js';
import { collection, query, where, getDocs, doc, addDoc, onSnapshot } from 'firebase/firestore';
import { db } from './firebase'; // 假设你的Firebase实例在这里导入
import { useAuth } from './AuthContext'; // 假设你的认证上下文在这里导入
import { Container, Row, Col, Card, Button, Spinner } from 'react-bootstrap'; // 假设你使用react-bootstrap

export default function Subscription() {
  const [loading, setLoading] = useState(false);
  const [products, setProducts] = useState({}); // 初始化为对象，方便按ID访问
  const { currentUser } = useAuth();
  const [stripe, setStripe] = useState(null);

  useEffect(() => {
    // 初始化Stripe
    const initializeStripe = async () => {
      const stripeInstance = await loadStripe(
        process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY
      );
      setStripe(stripeInstance);
    };

    // 异步获取产品和价格数据
    const fetchProductsAndPrices = async () => {
      setLoading(true); // 可以选择在数据加载时显示加载状态
      try {
        const q = query(collection(db, "products"), where("active", "==", true));
        const querySnapshot = await getDocs(q);

        const productsTemp = {};
        const priceFetchPromises = []; // 用于收集所有价格获取的Promise

        querySnapshot.forEach((doc) => {
          const productId = doc.id;
          const productData = doc.data();
          productsTemp[productId] = productData; // 先存储产品基本信息

          // 为每个产品创建一个获取价格的Promise
          const pricePromise = getDocs(
            collection(db, "products", productId, "prices")
          ).then((priceSnapshot) => {
            const prices = {};
            // 假设每个产品只有一个价格，或者我们只取第一个
            priceSnapshot.forEach((priceDoc) => {
              prices.priceId = priceDoc.id;
              prices.priceData = priceDoc.data();
            });
            // 将获取到的价格信息添加到对应的产品对象中
            productsTemp[productId].prices = prices;
          });
          priceFetchPromises.push(pricePromise); // 将此Promise添加到数组
        });

        // 等待所有价格获取的Promise都完成
        await Promise.all(priceFetchPromises);

        // 所有产品及其价格都已加载完毕，现在可以更新状态
        setProducts(productsTemp);
      } catch (error) {
        console.error("Error fetching products and prices:", error);
        // 处理错误，例如显示错误消息给用户
      } finally {
        setLoading(false); // 数据加载完成，无论成功失败都结束加载状态
      }
    };

    initializeStripe();
    fetchProductsAndPrices(); // 调用异步函数开始数据加载

  }, []); // 空依赖数组表示只在组件挂载时运行一次

  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(productData);
            // console.log(productData.prices); // 现在这里不会是 undefined 了

            return (
              <Col md={4} key={productId}>
                <Card>
                  <Card.Header className="text-center">
                    <h5>{productData.name}</h5>
                    {/* 确保 priceData 存在再访问 */}
                    <h5>${(productData.prices?.priceData?.unit_amount / 100 || 0).toFixed(2)} / {productData.prices?.priceData?.interval || 'month'}</h5>
                  </Card.Header>
                  <Card.Body>
                    <h6>{productData.description}</h6>
                    <Button
                      onClick={() => loadCheckOut(productData?.prices?.priceId)}
                      variant="primary"
                      block
                      disabled={loading}
                    >
                      {loading ? (
                        <>
                          <Spinner
                            animation="border"
                            size="sm"
                            className="mr-2"
                          />
                          Loading...
                        </>
                      ) : (
                        "Subscribe"
                      )}
                    </Button>
                  </Card.Body>
                </Card>
              </Col>
            );
          })}
        </Row>
      </Container>
    </>
  );
}