Failing to get firestore information when using getStaticProps on Next.js

Question

I am trying to read data from firebase firestore and it keeps giving me the error

TypeError: querySnapshot is not a function

Where could I be going wrong?. My code below is how I am writting it.

import React from 'react';
import { db } from '@/firebase';
import { collection, getDocs } from 'firebase/firestore';

     
export const getStaticProps = async () => {
    const querySnapshot = await getDocs(collection(db, 'blogs'));
            querySnapshot.forEach((doc) => {
                console.log(doc.id, " => ", doc.data().title);
    });
    
    return {
        props: {
            blogs: querySnapshot()
        }
    }
}

function index({blogs}) {
  return (
    <div>
        {blogs.map(blog => {
            <p>{blog.title}</p>
        })}
    </div>
  )
}

export default index

Answer 1

querySnapshot is an object and you are calling it as a function here:

   props: {
        blogs: querySnapshot()
    }

this is the proper way:

      let blogs = [];
      querySnaphot?.forEach((doc) => {
        blogs.push({ id: doc.id, ...doc.data() });
      });

then you return:

   props: {
        blogs: blogs
    }