Tratando de aprender Firebase para agregar a mi proyecto React. Muchas respuestas tratan con versiones anteriores con Firebase. Lea que Firebase 9 fue una actualización importante, por lo que es difícil encontrar respuestas. Sigo recibiendo este error:

 fetchxmlhttpfactory.js:270 POST http://localhost:8090/google.firestore.v1.Firestore/Listen/channel?database=projects%2Fabc-chart%2Fdatabases%2F(default)&VER=8&RID=41901&CVER=22&X-HTTP-Session-Id=gsessionid&%24httpHeaders=X-Goog-Api-Client%3Agl-js%2F%20fire%2F9.6.10%0D%0AContent-Type%3Atext%2Fplain%0D%0AX-Firebase-GMPID%3A1%3A177213787941%3Aweb%3A9f6ce48e7d16c61c3754cc%0D%0A&zx=7tsvfv2qwcyt&t=1 net::ERR_CONNECTION_REFUSED

y éste:

 @firebase/firestore: Firestore (9.6.10): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=unavailable]: The operation could not be completed This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

Mi archivo firebase-config.js, copiado de Firebase como sugieren.

 import { initializeApp } from 'firebase/app' import { getFirestore, connectFirestoreEmulator } from '@firebase/firestore' const firebaseConfig = { apiKey: "", authDomain: "", projectId: "", storageBucket: "", messagingSenderId: "", appId: "", measurementId: "" }; // init firebase app const app = initializeApp(firebaseConfig); // init services: used to reach out to get data export const db = getFirestore(app); connectFirestoreEmulator(db, 'localhost', 8090);

y el archivo React App.js

 import { useState, useEffect } from 'react'; import './App.css'; import { db } from './firebase-config'; import { collection, getDocs } from 'firebase/firestore'; function App() { const [students, setStudents] = useState([]); const studentCollectionRef = collection(db, "students"); useEffect(() => { const getStudents = async () => { const data = await getDocs(studentCollectionRef); console.log(data); } getStudents() }, []) return ( <div className="App"> <header className="App-header"> Hey queen </header> </div> ); } export default App;