How to fix erorr, Unhandled Rejection (FirebaseError): Function DocumentReference.set() called with invalid data. Unsupported field value: undefined

Question

I have a Basket for payment processing and the Stripe functionality works perfect and payments are sent through despite receiving the firebase error, what I'm trying to accomplish is pushing data into firebase backend to than create a orders history but the data isn't being pushed into firebase collections. The console log error says there's an issue with line 47, const payload = await stripe and line 56, db.collection("users") so there's obviously something wrong with the way firebase is reading users id. Any suggestions?

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");
      });
  };

Image of error

Answer 1

The error is thrown when you are passing any undefined value to the document. I'd recommend adding some console.log() statements before the set() method and checking which field is undefined. Also you are not handling promise returned by set() method. Try refactoring your code to this:

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);
    }
  });