Tengo una colección de Firestore con el nombre de "mentor". Cada documento de la colección contiene tres campos: "nombre", "correo electrónico" y "linkedin".

Quiero buscar todos los documentos de la colección y pasarlos como accesorios. Luego quiero acceder a estos campos de documentos para que se representen en mi página.

Estoy usando getServerSideProps para obtener los datos de Firestore antes de mostrar la página. Mi código es el siguiente:

tablero.js:

 import nookies from "nookies"; import { onSnapshot, getFirestore, collection, getDocs } from "firebase/firestore"; export default function dashboard({session,mentors}){ return( //rendering each value in the mentors array ) } export async function getServerSideProps(context) { try { const cookies = nookies.get(context); const token = await verifyIdToken(cookies.token); if (!token) { return { redirect: { permanent: false, destination: "/login", }, props: {}, }; } const mentors = []; const db = getFirestore(); const querySnapshot = await getDocs(collection(db, "mentor")); querySnapshot.forEach((doc) => { mentors.push({mentorID: doc.id, mentorData: doc.data}) }); return { props: { session: token, mentors, }, }; } catch (error) { context.res.writeHead(302, { location: "/login" }); context.res.end(); return { props: {} }; } }

Sin embargo, recibo el siguiente error en la consola:

 error - Error: Error serializing `.mentors[0].mentorData` returned from `getServerSideProps` in "/dashboard". Reason: `function` cannot be serialized as JSON. Please only return JSON serializable data types.

¿Cómo puedo solucionar esto? Disculpe si hay algún error en el código. Soy relativamente nuevo en JS.