使用Next.js的getStaticPaths/Props从Firebase Firestore取数据时页面空白无报错

你的代码存在三个核心问题，导致页面渲染空白且无报错，逐个拆解说明：

1. getStaticProps 未实际获取 Firestore 文档数据 #

doc(db, "blogs", id) 仅创建了文档引用对象，并未发起请求获取实际内容。必须调用 getDoc() 获取文档快照，再通过 .data() 提取有效数据：

export const getStaticProps = async (context) => {
    const id = context.params.id;
    // 获取文档快照
    const docSnap = await getDoc(doc(db, "blogs", id));
    
    if (!docSnap.exists()) {
        // 处理文档不存在的边界情况
        return { props: { data: [] } }
    }
    
    // 合并文档ID与数据，保留完整信息
    const blogData = { id: docSnap.id, ...docSnap.data() };

    return {
        props: {
            data: [blogData]
        }
    }
}

2. 组件 map 函数未返回 JSX 元素 #

data.map 的回调函数没有返回JSX内容，导致渲染时无任何元素生成。需要添加 return 或把大括号改为圆括号：

{data.map(blog => {
    return (
        <div className="j" key={blog.id}>
            <h1>{blog.title}</h1>
            <p>{blog.description}</p>
        </div>
    )
})}

注意：必须给循环生成的元素添加 key 属性，符合React列表渲染规范

3. JSX 内直接写 console.log 无效 #

console.log(blog.title) 放在JSX标签内不会执行，调试代码需移到回调函数外层：

{data.map(blog => {
    console.log(blog.title); // 此处可正常输出调试信息
    return (
        <div className="j" key={blog.id}>
            <h1>{blog.title}</h1>
            <p>{blog.description}</p>
        </div>
    )
})}

完整修复后的代码 #

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 docSnap = await getDoc(doc(db, "blogs", id));
    
    if (!docSnap.exists()) {
        return { props: { data: [] } }
    }
    
    const blogData = { id: docSnap.id, ...docSnap.data() };

    return {
        props: {
            data: [blogData]
        }
    }
}

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

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

export default Details

内容的提问来源于stack exchange，提问作者Vuyi