Google - Cloud Firestore WEB v.9

Asumiendo que ya has configurado tu proyecto con la versión web 9, vamos a explicar brevemente como trabajar con esta versión, que para mi opinión personal, se hace más fácil y más rápida a la hora de trabajar con ella.

Esta versión tiene infinidad de métodos, pero solo hablaremos de los más usados y útiles.

Para comenzar

Necesitas importar e instanciar tu base de datos.
Y en nuestro caso lo propagaremos por nuestro proyecto en react.

import { initializeApp } from "firebase/app";
import { getStorage, ref } from "firebase/storage";
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export default db;

Siempre debemos utilizar en esta nueva versión initializeApp con la configuración que obtuviste de tu proyecto.

Perfecto

Ya tenemos nuestra db lista para importar desde donde la necesitemos sin tener que volverla a iniciar.

Subamos datos

En tu archivo JS, donde necesites crear y subir los datos, utilizaremos los métodos que verás a continuación:

import db from "../middleware/firebase";
import { collection, addDoc } from "firebase/firestore";

const subirPelicula = (pelicula) => async {
  try {
     await addDoc(collection(db, "peliculas"), {
        ...pelicula
     });
  } catch(err) => { console.error(err) };
}

Como puedes ver addDoc añadiría un nuevo documento a tu colección llamada "películas", de la instancia de tu db base de datos.

Nota si no añadimos ninguna id o referencia addDoc la añadirá por ti.
Se trata de una key alfanumérica como esta 2FW02pxkfsiHgNCdUnnfs

Obtengamos datos

En algún momento necesitaremos obtener nuestros datos para mostrarlos en algún sitio, pues vamos a ello.

Solo una película

import db from "../middleware/firebase";
import { doc, getDoc, getDocs } from "firebase/firestore";

const obtenerPelicula = (id_pelicula) => async {
  try {
     const docRef = doc(db, "peliculas", id_pelicula);
     const docSnap = await getDoc(docRef);
     if (docSnap.exists()) {
        //Si existe, tendremos nuestra pelicula en docSnap.data()
        peliculas.push(docSnap.data());
     } else {
        console.log("No existe");
     }
  } catch(err) => { console.error(err) };
}

Si en cualquier caso queremos obtener toda la colección de películas... como verás utilizamos el método en plural 🤯 facil no?

import db from "../middleware/firebase";
import { collection, getDocs } from "firebase/firestore";

const obtenerPeliculas = () => async {
  try {
     const querySnapshot = await getDocs(collection(db, "peliculas"));
     querySnapshot.forEach((doc) => {
        peliculas = doc.data();
     });
  } catch(err) => { console.error(err) };
}

Modificar

Si sabes el path o la id que quieres modificar sería tan sencillo como esto, utilizando el setDoc aunque valdría igual addDoc, pero os recomiendo siempre usar la primera para evitar liarse.

import { doc, setDoc } from "firebase/firestore";

await setDoc(doc(db, "peliculas", "id_de_la_pelicula"), {
  enCines: true,
});

Borrar

Al igual que modificar necesitaremos saber la id o path de lo que queremos borrar.

import { doc, deleteDoc } from "firebase/firestore";

await deleteDoc(doc(db, "peliculas", "id_de_la_pelicula"));

Y por último, si lo que queremos es borrar solo un campo.

import { doc, updateDoc, deleteField } from "firebase/firestore";

const peliculaRef= doc(db, "pelicula", "id_de_la_pelicula");

await updateDoc(peliculaRef, {
    campoAEliminar: deleteField()
});

¡Eso es todo!
Os recomiendo usar esta nueva versión, aunque al principio parezca más difícil.

Recordad que todo tiene una curva de aprendizaje, paciencia y práctica.

Si quieren ampliar más, toda la documentación esta muy bien detallada.

Documentación Firestore ES