Firebase v9中.then()内await报错问题求助

问题核心：.then()的回调函数未标记为async，而await只能在async函数或模块顶层使用，导致语法错误。

修复方案1：给.then回调添加async关键字 #

直接在.then的回调函数前加上async，就能在内部正常使用await：

////.....
event.preventDefault();
setProcessing(true);

const payload = await stripe
  .confirmCardPayment(clientSecret, {
    payment_method: {
      card: elements.getElement(CardElement),
    },
  })
  .then(async ({ paymentIntent }) => { // 此处添加async关键字
    // payment intent = the payment confirmation ... term used by stripe
    await setDoc(doc(db, "users", user?.uid, "orders", paymentIntent.id),{
      cart: cart,
      amount: paymentIntent.amount,
      created: paymentIntent.created,
    });

    setSucceeded(true);
    setError(null);
    setProcessing(false);

    dispatch({
      type: "EMPTY_CART",
    });

    history.replace("/orders");
  });
};

修复方案2：统一使用async/await写法（更推荐） #

避免混合.then和await，让代码逻辑更连贯易读：

////.....
event.preventDefault();
setProcessing(true);

try {
  const { paymentIntent } = await stripe.confirmCardPayment(clientSecret, {
    payment_method: {
      card: elements.getElement(CardElement),
    },
  });

  // 保存订单到Firebase
  await setDoc(doc(db, "users", user?.uid, "orders", paymentIntent.id), {
    cart: cart,
    amount: paymentIntent.amount,
    created: paymentIntent.created,
  });

  setSucceeded(true);
  setError(null);
  setProcessing(false);

  dispatch({
    type: "EMPTY_CART",
  });

  history.replace("/orders");
} catch (error) {
  // 捕获支付或订单保存时的错误
  setError(error.message);
  setProcessing(false);
}
};

注意事项 #

• Firebase v9的setDoc是异步操作，必须通过await或.then等待执行完成，否则后续逻辑可能在订单未成功保存时就触发。
• 建议添加try/catch块处理异常，避免因支付失败、权限不足等问题导致页面状态异常。

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