Next.js生产环境getStaticProps每次请求执行？Firebase部署异常

1. 修复getStaticProps参数缺失问题 #

你的getStaticProps函数未接收context参数，导致无法正确获取路由params.id，这会让预生成静态页面时的查询逻辑失效，最终Next.js无法完成静态页面预构建，部署后每次访问都会重新执行数据获取逻辑。

修改后的getStaticProps代码：

export async function getStaticProps(context) { // 必须传入context参数
  const { id } = context.params;
  const leaguesRef = collection(database, 'highlights'); // collection是同步方法，无需await
  const q = query(leaguesRef, where('league', '==', id));
  const leagueSnapshot = await getDocs(q);

  const data = leagueSnapshot.docs.map(doc => doc.data());

  return {
    props: { data },
  };
}

另外注意：collection()是Firebase Firestore的同步方法，无需添加await，原代码中的await collection(...)属于冗余写法。

2. 确认Firebase部署配置 #

如果用Firebase Hosting部署Next.js，需确保部署的是静态导出产物而非SSR模式：

• 在next.config.js中添加配置启用静态导出：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  // 其他项目配置...
}

module.exports = nextConfig;

• 执行npm run build后，会生成out目录，将该目录部署到Firebase Hosting。若采用SSR模式部署（比如搭配Cloud Functions），getStaticProps会在每次请求时运行，而非预生成静态页面。

3. 验证预生成页面状态 #

本地执行npm run build后，查看out目录下是否生成对应路由的静态HTML文件（例如/spain/index.html、/germany/index.html）：

• 若文件存在，说明静态生成成功，部署后跳转不会触发新请求
• 若文件不存在，需检查：
  • leagues数据中的link字段是否为预期的字符串（如spain、germany）
  • Firestore查询是否能返回有效数据，避免因查询无结果导致页面生成失败

内容的提问来源于stack exchange，提问作者Икер Касильяс