Uncaught (in promise) FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

[anthonrodgrs01]

`import React, { useEffect, useState } from "react"; import CheckoutProduct from "./CheckoutProduct"; import "./Payment.css"; import { useStateValue } from "./StateProvider"; import { Link, useNavigate } from "react-router-dom"; import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js"; import CurrencyFormat from "react-currency-format"; import { getBasketTotal } from "./reducer"; import axios from "./axios"; import { auth } from "./firebase"; import { db } from "./firebase"; import { doc, setDoc } from "firebase/firestore"; import { collection, addDoc } from "firebase/firestore"; import { async } from "@firebase/util";

function Payment() { const [{ basket, user }, dispatch] = useStateValue(); const history = useNavigate(); 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 the special stripe secret which allows us to charge a customer const getClientSecret = async () => { const response = await axios({ method: "post", // Stripe expects the total in a currencies subunits url: /payments/create?total=${getBasketTotal(basket) * 100}, }); setClientSecret(response.data.clientSecret); }; getClientSecret(); }, [basket]);

console.log("THE SECRET IS >>>>>", clientSecret);

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 }) => { // db.collection("users") // .doc(user?.uid) // .collection("orders") // .doc(paymentIntent.id) // .set({ // basket: basket, // amount: paymentIntent.amount, // created: paymentIntent.created, // });

const docRef = doc(collection(db, "users", user?.uid)); const newRef = doc(collection(docRef, "orders", paymentIntent?.id)); setDoc(newRef, { basket: basket, amount: paymentIntent.amount, created: paymentIntent.created, });

setSucceeded(true); setError(null); setProcessing(false); //history.replace("/orders"); dispatch({ type: "EMPTY_BASKET", user: auth, }); history("/orders", { replace: true }); }); };

const handleChange = (event) => { //listen for changes in the card element // and display any error as the customer types their card detail setDisabled(event.empty); setError(event.error ? event.error.message : ""); }; return (

Checkout ({basket?.length} Items)

{/* Payment section - delivery address */} {/* Payment section - Review Items */} {/* Payment section - Payment Method */}

Delivery Address

{user?.email}

123 React Lane

Los Angeles, CA

Review Items and Delivery

{basket.map((items) => ( ))}

Payment Method

{/* Here the stripe magic will go */}

( <>

Order Total: {value}

)} decimalScale={2} value={getBasketTotal(basket)} displayType={"text"} thousandSeparator={true} prefix={"$"} /> {processing ?

Processing

: "Buy now"}

{/* Error */} {error &&

{error}

}

); }

export default Payment; `

I think its due to the firebase v8 to v9 but i tried changing the code to v9 but I cant get grasp of it.... can someone db.collection("users") .doc(user?.uid) .collection("orders") .doc(paymentIntent.id) .set({ basket: basket, amount: paymentIntent.amount, created: paymentIntent.created, }); convert this code into v9 because of this I am not able to complete the clone plz help