cffsadasdasdfasdfasd
Publicado el 26 de November, 20252 min de lectura
Quiero que soluciones el error de Next.js:
“Only plain objects can be passed to Client Components. Objects with toJSON methods are not supported.”
Este error ocurre porque mi página en src/app/page.tsx está enviando documentos Firestore directamente al componente cliente HomePageClient, y Firestore devuelve objetos no serializables como Timestamp.
Necesito que realices estos cambios EXACTOS:
✅ 1. Crear una función que convierta documentos Firestore a JSON seguro
Crea en src/lib/firestore.ts una función llamada:
export function serializeFirestoreDoc(doc: any) {
return {
...doc,
id: doc.id ?? "",
createdAt: doc.createdAt ? doc.createdAt.toDate().toISOString() : null,
updatedAt: doc.updatedAt ? doc.updatedAt.toDate().toISOString() : null,
};
}
Y úsala en todas las consultas para que:
convierta timestamps a strings
convierta el ID
elimine valores no serializables
✅ 2. Actualizar la función que obtiene artículos
En getAllArticles() modificar para que use la función de serialización:
export async function getAllArticles() {
const q = query(collection(db, "articles"));
const snapshot = await getDocs(q);
return snapshot.docs.map(d => serializeFirestoreDoc({ id: d.id, ...d.data() }));
}
✅ 3. Corregir src/app/page.tsx para que funcione como Server Component
Debe verse así:
import { getAllArticles } from "@/src/lib/firestore";
import HomePageClient from "@/src/components/site/HomePageClient";
export default async function Home() {
const allArticles = await getAllArticles();
return (
