Agregar Documentos a Firebase Firestore en React.

Firebase Firestore es una base de datos en tiempo real en la nube que facilita el almacenamiento y la sincronización de datos en aplicaciones web y móviles.

Utilizaremos una versión ligera de Firebase Firestore llamada "firebase/firestore/lite" y la librería "react-hot-toast" para mostrar notificaciones en la interfaz de usuario.

npm install react-hot-toast

npm install firebase

CÓDIGO COMPLETO

Este fragmento de código simplifica en gran medida la tarea de agregar documentos a Firestore en aplicaciones React, lo que puede ser de gran utilidad en tus proyectos.

import { firestoreDb } from "@/context/firebase-config";
import { addDoc, collection } from "firebase/firestore/lite";
import toast from "react-hot-toast";

export async function addDataFirestore(
  collectionName: string, // nombre de la colección
  documentDataAdd: object // objeto con los datos del documento
) {
  try {
    const referenciaColeccion = collection(firestoreDb, collectionName);
    const docRef = await addDoc(referenciaColeccion, documentDataAdd);
    toast.success(`¡Documento creado con éxito!${docRef.id}`);
  } catch (error: any) {
    console.error("Error al añadir el documento: ", error);
    throw error;
  }
}

CÓDIGO ClIENTE

"use client";
import toast, { Toaster } from "react-hot-toast";
import { addDataFirestore } from "@/firebase/addDataFirestore";

export const BtnAddProducts = () => {
  return (
    <>
      <Toaster />
      <button
        onClick={() =>
          addDataFirestore("Productos", {
            name: "Producto 1",
            description: "Descripción del producto 1",
            price: 10,
          })
        }
      >
        Añadir producto
      </button>
    </>
  );
};

NOTAS

-Manejo de Errores con try-catch:

Utilizamos un bloque try para ejecutar el código y manejar posibles errores, Si se produce un error durante el proceso, se captura en el bloque catch. Registramos el error en la consola y lo lanzamos nuevamente para su posterior manejo.

-Referencia a la Colección:

Creamos una referencia a la colección específica en Firestore que deseamos actualizar utilizando la función collection. Tomamos la base de datos de Firestore (firestoreDb) y el nombre de la colección como argumentos.

Agregar el Documento addDoc: Usamos addDoc para agregar un nuevo documento a la colección. La referencia a la colección y los datos del documento se pasan como argumentos. El resultado, docRef, contiene información sobre el documento recién creado.