Stripe Firebase扩展：onCurrentUserPaymentUpdate无法正常工作求助

核心问题原因 #

你的代码存在两个致命逻辑错误：

1. 页面跳转导致监听器未生效：调用window.location.assign(session.url)后，当前页面立即卸载，后续的onCurrentUserPaymentUpdate监听器根本没有机会注册和执行。
2. 数组遍历方式错误：使用for (const change in snapshot.changes)遍历的是数组索引而非元素，无法正确获取支付变更数据。

分步修复方案 #

1. 重构购买按钮逻辑

移除按钮点击事件中的监听器代码，仅保留结账会话创建和跳转逻辑：

const buyTokens1 = async () => {
  const session = await createCheckoutSession(payments, {
    mode: "payment",
    price: [PRICE_ID],
    success_url: `${window.location.origin}/success`, // 指定专门的成功页面路由
    cancel_url: window.location.origin,
  });
  window.location.assign(session.url);
};

2. 在成功页面添加支付监听器

在用户支付完成后跳转的成功页面组件中，初始化支付更新监听器：

import { useEffect } from 'react';
import { onCurrentUserPaymentUpdate } from '@stripe/firestore-stripe-payments';
import { doc, updateDoc, increment } from 'firebase/firestore';
import { db } from '../path-to-your-firebase-config';

const SuccessPage = ({ authUser, payments }) => {
  useEffect(() => {
    if (!authUser) return;

    // 注册支付更新监听器
    const unsubscribe = onCurrentUserPaymentUpdate(payments, async (snapshot) => {
      // 修正数组遍历方式：使用for...of获取元素而非索引
      for (const change of snapshot.changes) {
        // 仅处理成功的支付记录
        if (change.type === 'added' && change.data.status === 'succeeded') {
          const docRef = doc(db, 'users', authUser.uid);
          // 使用Firestore原子递增操作避免并发更新冲突
          await updateDoc(docRef, {
            tokens: increment(100),
          });
          // 可选：更新完成后可添加提示或跳转逻辑
        }
      }
    });

    // 组件卸载时取消监听器，避免内存泄漏
    return () => unsubscribe();
  }, [authUser, payments]);

  return (
    <div>
      <h1>支付成功！</h1>
      {/* 成功页面内容 */}
    </div>
  );
};

export default SuccessPage;

3. 关键配置检查

• Stripe Webhook 配置：确保已在Firebase控制台正确配置Stripe Webhook（监听checkout.session.completed事件），这是SDK同步支付数据到Firestore的前提。
• 用户认证状态：监听器初始化时必须确保用户已登录，否则无法关联到当前用户的支付记录。
• 价格ID有效性：确认PRICE_ID对应Stripe后台的一次性支付价格项。

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