Aprendí firebase 8 y ahora la actualización de firebase 9 me confunde. Estoy tratando de conectarme a Cloud Firestore pero siempre me da este error firebase_js__WEBPACK_IMPORTED_MODULE_9 _.db.collection no es una función. Ya leí la documentación pero todavía no puedo entender qué es lo que está mal.

 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, useStripe, useElements} from "@stripe/react-stripe-js"; import CurrencyFormat from 'react-currency-format'; import {getBasketTotal} from "./reducer"; import axios from "./axios"; import { collection, addDoc } from "firebase/firestore"; import {db} from "./firebase.js"; 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 setSucceeded(true); setError(null) setProcessing(false) db .collection('users') .doc(user?.uid) .collection('orders') .doc(paymentIntent.id) .set({ basket: basket, amount: paymentIntent.amount, created: paymentIntent.created }) dispatch({ type:'EMPTY_BASKET' }) navigate('/orders', {replace :true}) }) }