Next.js 13 and Firestore static blog page gives me this error => TypeError: Cannot read properties of undefined (reading 'title')

Question

I am trying to statically generate individual blog pages blog/[id].js on my Next 13 app with Firestore using getStaticPaths and getStaticProps, but I keep getting this error: TypeError: Cannot read properties of undefined (reading 'title'). Here is my code:

export async function getStaticPaths() {
  const querySnapshot = await getDocs(collection(db, 'blogposts'))
  const blogs = querySnapshot.docs.map((doc) => ({
    id: doc.id,
    ...doc.data()
  }))

  const paths = blogs.map((blog) => ({
    params: { id: blog.id }
  }))

  return {
    paths,
    fallback: false
  }
}

export async function getStaticProps({ params }) {
  const docRef = doc(db, 'blogposts', params.id)
  const docSnap = await getDoc(docRef)

  return {
    props: {
      post: {
        id: docSnap.id,
        ...docSnap.data()
      }
    },
  }
}

const BlogPost = ({ post }) => {
  const router = useRouter();

  if (router.isFallback) {
    return <div>loading...</div>;
  }

  return (
    <h1>{post.title}</h1>
    <div>{post.content}</div>
  );
}

export default BlogPost;

On Firestore, my "blogposts" collection uses the slug as the document id and has the following fields: (id, title, slug, image, content). Fetching the blog posts using the regular getDoc and the slug works fine on localhost and Vercel, but the client wants to host their website on GoDaddy, so I have to statically generate the blog pages.

I have tried to display "post" and even "paths" but nothing shows up on the client side