In my Firestore database, I have a collection named "mentor" that contains documents with three fields: "name", "email", and "linkedin". My goal is to fetch all the documents from this collection and pass them as props so that I can render their fields on my page.
To achieve this, I am using getServerSideProps to retrieve the Firestore data before rendering the page. Below is my code snippet:
dashboard.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: {} };
}
}
Unfortunately, I encountered an error while trying to serialize the data returned from `getServerSideProps`. The specific issue relates to attempting to serialize a `function`, which is not permissible for JSON serialization. Can anyone advise on how to address this? Apologies for any errors in the code provided, as I am still learning JavaScript.