如何修复错误，未处理的拒绝 (FirebaseError)：Function DocumentReference.set() 使用无效数据调用。 不支持的字段值：未定义

Question

我有一个用于支付处理的篮子，Stripe 功能完美无缺，尽管收到 firebase 错误，但支付仍然通过，我想要完成的是将数据推送到 firebase 后端，而不是创建订单历史记录，但数据不是推入 firebase collections。控制台日志错误表明第 47 行 const payload = await stripe 和第 56 行 db.collection("users") 存在问题，因此 firebase 读取用户 ID 的方式显然有问题。 有什么建议么？

const handleSubmit = async (event) => {
    // do all the fancy stripe stuff...
    event.preventDefault();
    setProcessing(true);

    const payload = await stripe
      .confirmCardPayment(clientSecret, {
        payment_method: {
          card: elements.getElement(CardElement),
        },
      })
      .then(({ paymentIntent }) => {
        // paymentIntent = payment confirmation

        db.collection("users")
          .doc(user?.uid)
          .collection("orders")
          .doc(paymentIntent.id)
          .set({
            basket: basket,
            amount: paymentIntent.amount,
            created: paymentIntent.created,
          });

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

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

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

错误图片

Answer 1

当您将任何undefined的值传递给文档时会抛出错误。 我建议在set()方法之前添加一些console.log()语句并检查哪个字段未定义。 您也没有处理set()方法返回的 promise 。 尝试将您的代码重构为：

const payload = await stripe
  .confirmCardPayment(clientSecret, {
    payment_method: {
      card: elements.getElement(CardElement),
    },
  })
  .then(async ({ paymentIntent }) => {
    //  ^^^^^
    // paymentIntent = payment confirmation
    try {
      console.log("Payment Intent:", paymentIntent);
      console.log("Basket:", basket);
      // await here
      await db
        .collection("users")
        .doc(user?.uid)
        .collection("orders")
        .doc(paymentIntent.id)
        .set({
          basket: basket,
          amount: paymentIntent.amount,
          created: paymentIntent.created,
        });

      // proceed
    } catch (e) {
      console.log(e);
    }
  });