Estoy intentando obtener un array de objetos que cree en Firestore. Array=listProducts. intstale firebase, y cuando quiero obtener el array de objetos me tira este error
Uncaught (in promise) FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore
les paso el codigo, quizas alguno me pueda dar una pista..
ARCHIVO JS EN DONDE ME CONECTO CON FIREBASE
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app"
import {getFirestore} from "firebase/firestore"
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: //aca la direccion que me tira firestore para conectarme
authDomain: "ecommerce-react-45765.firebaseapp.com",
projectId: "ecommerce-react-45765",
storageBucket: "ecommerce-react-45765.appspot.com",
messagingSenderId: "492631342338",
appId: "1:492631342338:web:930000a3d325860bca961b"
}
// Initialize Firebase
const app = initializeApp(firebaseConfig)
const db = getFirestore(app)//esto lo agrego yo
export default db//esto lo agrego yo
COMPLEMENTO DONDE LO QUIERO USAR
import React, {useState,useEffect} from "react"
import Item from "./Item"
import {ProductsMock} from "../MockList/ProductsMock"//al definir asi, primero el archivo, despues la funcion, me deja llamar esa funcion
import { ClassNames } from "@emotion/react"
import{collection, getDocs} from "firebase/firestore"
import db from "../../Firebase/Firestore"
const ItemList=()=>{
const[loading,setLoading]=useState(true)
//2 declaro state parag uardar ahi lista que se obtiene del servidor
const [listProductss,stateListProducts]=useState([])
const getData= async ()=>{
alert("ok")
const getItems=collection(db,"listProducts")//ACA TIRA EL ERROR, NO RECONOCE EL DB
const productsSnapshot=await getDocs(getItems)//devuelve array de objetos
console.log(productsSnapshot, "snapsho")}
useEffect(()=>{
getData()
},[])
return(
<div className="item-list">
{ loading?(
<p>Cargando</p>
):(
listProductss.map((product)=>{
return <Item data={product} key={product.id} />
})
)}
</div>
)
}
export default ItemList;