javascript - 未处理的拒绝 (FirebaseError)：使用无效数据调用的函数 DocumentReference.set()

Question

不支持的字段值：未定义（在文档 users/YWSUY1sTA6NnYQMH5y6u54Ei8Kt2/orders/pi_1IhVsvFvL327nYuzyzeS7b9m 中找到）

const句柄提交和数据库中的错误请帮我解决这个问题

当我在不使用 sql 时发生错误db.collection('users')

如果有人可以帮助我解决，我将不胜感激

const stripe = useStripe();
const elements = useElements();

const [succeeded, setSucceeded] = useState(false);
const [processing, setProcessing] = useState("");
const [error, setError] = useState(null);
const [disabled, setDisabled] = useState(true);
const [clientSecret, setClientSecret] = useState(true);

useEffect(() => {
    //generate a special stripe code to allow us to charge customer
    const getClientSecret = async () => {
        const response = await axios({
            method: 'post',
            url: `/payments/create?total=${getBasketTotal(basket) * 100}`
        });
        setClientSecret(response.data.clientSecret)
    }

    getClientSecret();

}, [basket])

console.log('The Secret is', clientSecret)
console.log('hello', user)

const handleSubmit = async (event) => {
    event.preventDefault();
    setProcessing(true);

    // eslint-disable-next-line no-unused-vars
    const payload = await stripe.confirmCardPayment(clientSecret, {
        payment_method: {
            card: elements.getElement(CardElement)
        }
    }).then(({ paymentIntent }) => {

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

const handleChange = event => {
    //Listen for the changes in the card element
    //and display any errors as the customer type their card details
    setDisabled(event.empty);
    setError(event.error ? event.error.message : "");

}

return (
    <div className="payment">
        <div className="payment_container">
            <h1>
                Checkout (<Link to='/checkout'>{basket?.length} items</Link>)
            </h1>
            {/* delivery address */}
            <div className="payment_section">
                <div className="payment_title">
                    <h3>Delivery Address</h3>
                </div>
                <div className="payment_address">
                    <p>{user?.email}</p>
                    <p>Street 4</p>
                    <p>Islambad</p>
                </div>

            </div>

            {/* Review Items */}
            <div className="payment_section">
                <div className="payment_title">
                    <h3>Review Items and Delivery</h3>
                </div>
                <div className="payment_items">
                    {basket.map(item => (
                        < CheckoutProduct
                            id={item.id}
                            title={item.title}
                            image={item.image}
                            price={item.price}
                            rating={item.rating}
                        />
                    ))}
                </div>
            </div>

            {/* Payment Method */}
            <div className="payment_section">
                <div className="payment_title">
                    <h3>Payment Method</h3>
                </div>
                <div className="payment_details">

                    <form onSubmit={handleSubmit}>
                        <CardElement onChange={handleChange} />
                        <div className="payment_priceContainer">
                            <CurrencyFormat
                                renderText={(value) => (
                                    <h3>Order Total: {value}</h3>

                                )}
                                decimalScale={2}
                                value={getBasketTotal(basket)}
                                displayType={"text"}
                                thousandSeparator={true}
                                perfix={"$"}
                            />
                            <button disabled={processing || disabled || succeeded}>
                                <span> {processing ? <p>Processing</p> : "Buy Now"}</span>
                            </button>
                        </div>
                        {error && <div>{error}</div>}
                    </form>
                </div>

            </div>

        </div>

    </div>
  )
}

export default Payment

标签： javascriptreactjsfirebasegoogle-cloud-firestore