Mostrar Documentos en Firebase Firestore desde Aplicaciones React.
toscadev
@ ToscaDevsJS
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 Leer los documentos de Firestore, lo que puede ser de gran utilidad en tus proyectos.
import { firestoreDb } from "@/context/firebase-config";
import {
collection,
doc,
getDocs,
DocumentReference,
} from "firebase/firestore/lite";
import { getDoc } from "firebase/firestore/lite";
import {
where,
orderBy,
limit,
query,
WhereFilterOp,
OrderByDirection,
} from "firebase/firestore/lite";
//leer todos los documentos de una colección
export async function viewDocument(
collectionName: string //nombre de la colección
) {
try {
const referenciaColeccion = collection(firestoreDb, collectionName);
const snapshot = await getDocs(referenciaColeccion);
// const documentos = snapshot.docs.map((doc) => doc.data());
const documentos = snapshot.docs.map((doc) => {
return { ...doc.data(), refdoc: doc.id };
});
return documentos;
} catch (error: any) {
console.error(
`Error al obtener los documentos de la colección ${collectionName}: `,
error
);
throw error; // Re-lanza el error para que pueda ser manejado por el código que llama a esta función
}
}
//leer un documento específico
export async function viewDocumentById(
collectionName: string, //nombre de la colección
documentoId: string //identificador del documento
) {
try {
const referenciaDocumento: DocumentReference = doc(
firestoreDb,
collectionName,
documentoId
);
const snapshot = await getDoc(referenciaDocumento);
if (snapshot.exists()) {
const documento = snapshot.data();
console.log("Documento encontrado:", documento);
return documento;
} else {
console.log("No se encontró ningún documento con ese ID.");
return null;
}
} catch (error: any) {
console.error(
`Error al obtener el documento ${documentoId} de la colección ${collectionName}: `,
error
);
throw error; // Re-lanza el error para que pueda ser manejado por el código que llama a esta función
}
}
//leer documentos con condición
export async function viewDocumentByCondition(
collectionName: string, //nombre de la colección
campo: string, //campo de la colección
operador: WhereFilterOp, //operador de comparación
valor: string | number | boolean, //valor a comparar
ordenCampo: string, //campo para ordenar los resultados
ordenDireccion: OrderByDirection, //dirección de la ordenación ('asc' o 'desc')
limite: number //número máximo de documentos a devolver
) {
try {
const referenciaColeccion = collection(firestoreDb, collectionName);
const q = query(
referenciaColeccion,
where(campo, operador, valor), // where("price", ">", 10),
orderBy(ordenCampo, ordenDireccion), //orderBy("price", "desc"),
limit(limite) //limit a mostrar
);
const snapshot = await getDocs(q);
const documentos = snapshot.docs.map((doc) => {
return { ...doc.data(), refdoc: doc.id };
});
return documentos;
} catch (error: any) {
console.error("Error al realizar la consulta:", error);
throw error; // Re-lanza el error para que pueda ser manejado por el código que llama a esta función
}
}
CÓDIGO ClIENTE
"use client";
import {
viewDocument,
viewDocumentById,
viewDocumentByCondition,
} from "@/firebase/viewDocument";
export const PageLeer = () => {
const data = await viewDocument("productos"); //leer todos los documentos de una colección
const data2 = await viewDocumentById("productos", "Ya0dsa7sseIIAC6e7pJF"); //leer un documento específico
const data3 = await viewDocumentByCondition( "productos", "price",">",10,"price","desc",1); //leer documentos con condición
return (
<>
<Toaster />
{data3?.map((post, i) => (
<div key={post.id} className="p-4 bg-slate-800 mb-2">
{i + 1} -{" product: "}
<h3>{post.name}</h3>
<p>{post.description}</p>
</div>
))}
</>
);
};
NOTAS DEL DESARROLLADOR
-Obtener los Documentos:
Utilizamos getDocs para obtener una instantánea (snapshot) de los documentos en la colección referenciada.
La variable snapshot contiene información sobre los documentos.
-Mapear los Documentos:
Mapeamos los documentos en la instantánea usando snapshot.docs.map. Esto nos permite transformar los datos de los documentos en un formato que sea más fácil de trabajar. En este caso, agregamos el ID del documento (doc.id) a los datos del documento para referencia futura.
-Referencia al Documento:
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.
-Manejo de Errores con try-catch:
Si ocurre un error durante la operación, lo capturamos en el bloque catch. Luego, registramos el error en la consola y lo lanzamos nuevamente para que pueda ser manejado por el código que llama a esta función.