Eliminar Documentos de 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 Eliminar documentos a Firestore en aplicaciones React, lo que puede ser de gran utilidad en tus proyectos.

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

export async function deleteDataFirestore(
  documentoId: string, //identificador del documento
  collectionName: string //nombre de la colección
) {
  try {
    const referenciaDocumento = doc(firestoreDb, collectionName, documentoId);
    await deleteDoc(referenciaDocumento);
    toast.success(`Documento con ID: ${documentoId} ha sido eliminado.`);
  } catch (error) {
    console.error("Error al eliminar el documento: ", error);
    throw error;
  }
}

CÓDIGO ClIENTE

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

export const BtnDeleteProducts = () => {
  return (
    <>
      <Toaster />
      <button onClick={() => deleteDataFirestore("vIIMETbrZAx9oEEeANHl", "productos")}>
        Eliminar documento
      </button>
    </>
  );
};

NOTAS DEL DESARROLLADOR

-Eliminar el Documento deleteDoc:

Usamos deleteDoc para eliminar el documento referenciado. Este proceso elimina el documento de la base de datos Firestore.

-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 al documento específico que deseamos eliminar utilizando la función doc. Tomamos la configuración de Firestore (firestoreDb), el nombre de la colección y el identificador del documento como argumentos.