Nextjs rendering empty page when pulling data from firebase firestore with no errors

Question

I am trying to get page details from firebase firestore using getStaticPaths and getStaticProps but I am getting an empty page and no errors. I do not understand what is going on. This is what my code looks like at the moment

import React from 'react'
import { useRouter } from 'next/router'
import { collection, doc, getDoc, getDocs } from "firebase/firestore";
import { db } from '@/firebase';


export const getStaticPaths = async () => {
    const reference = await getDocs(collection(db, 'blogs'));
    
    const paths = reference.docs.map(blog => {
        return {
            params: {id: blog.id}
        }
    })
    
    return {
        paths,
        fallback: false
    }
}

export const getStaticProps = async (context) => {
    const id = context.params.id;
    const response = doc(db, "blogs", id);
    const res = JSON.parse(JSON.stringify(response))
    const blogs = [];
    blogs.push(res)

    return {
        props: {
            data: blogs
        }
    }
}



function Details({data}) {
    const router = useRouter();

  return (
    <div>
        {data.map(blog => {
            <div className="j">
                console.log(blog.title)
                <h1>{blog.description}</h1>
            </div>
        })}
        <button onClick={() => router.push('/tryout')}>Back</button>
    </div>
  )
}

export default Details

Where could I be going wrong?

Answer 1

getStaticProps Response Format:

In your getStaticProps function, you're creating an incorrect response format. The response from doc() function is not JSON-parseable directly. You should use the getDoc() function instead to fetch the document data from Firestore.

import { getDoc, doc } from "firebase/firestore";

export const getStaticProps = async (context) => {
    const id = context.params.id;
    const docRef = doc(db, "blogs", id);
    const docSnap = await getDoc(docRef);
    const blog = docSnap.data();

    return {
        props: {
            data: blog
        }
    };
};

Mapping Inside Details Component:

In the Details component, you're trying to map over data directly, but it's not an array, assuming getStaticProps fetches only one document based on the ID. Remove the map function.

function Details({ data }) {
    const router = useRouter();

    return (
        <div>
            <div className="j">
                <h1>{data.title}</h1>
                <p>{data.description}</p>
            </div>
            <button onClick={() => router.push('/tryout')}>Back</button>
        </div>
    );
}

With these changes, your code should work as expected. Just ensure that your Firestore structure matches the fields you're trying to access in the Details component (data.title, data.description). If you're still encountering issues, please check the Firestore data structure and the values you are trying to access to ensure they match the expected format. Also, make sure your Firebase configuration (db) is set up correctly.