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

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

export async function editDataFirestore(
  collectionName: string, //nombre de la colección
  documentoId: string, //identificador del documento
  datosActualizados: object //datos a actualizar
) {
  try {
    const referenciaDocumento = doc(firestoreDb, collectionName, documentoId);
    await updateDoc(referenciaDocumento, datosActualizados);
    toast.success(`Documento con ID: ${documentoId} ha sido actualizado.`);
  } catch (error: any) {
    console.error("Error al actualizar el documento: ", error);
    throw error;
  }
}

CÓDIGO ClIENTE

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

export const BtnEditProducts = () => {
  return (
    <>
      <Toaster />
      <button onClick={() => editDataFirestore("nombres", "4eIqpYRKnOmCcgHpl4Xx",
          {
            name: "Jorge",
          })
        }
      >
        Actualizar documento
      </button>
    </>
  );
};

NOTAS DEL DESARROLLADOR

-Actualizar el Documento updateDoc:

Usamos updateDoc para actualizar el documento referenciado con los datos proporcionados en datosActualizados. Esta operación sobrescribe los datos existentes en el documento.

-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 al Documento a Editar:

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.