部署在Firebase的Next.js项目Sanity内容更新不生效求助

一、先确认Webhook是否正常触发 #

• 查看Sanity Webhook状态：在Sanity Studio的Settings > Webhooks中，检查对应Webhook的请求记录，确认是否有成功的200响应，或是否存在报错。
• 查看Firebase Functions日志：在Firebase控制台的Functions > 日志中，搜索sanityWebhookHandler，确认是否有请求接收的日志输出（比如console.log(JSON.stringify(req.body));的内容）。如果无日志，说明Webhook未触达函数，可能原因：
  • 函数URL填写错误（Firebase Functions的URL格式为https://REGION-PROJECT_ID.cloudfunctions.net/sanityWebhookHandler）
  • Sanity Webhook触发条件配置错误（比如仅勾选了特定文档类型，而你修改的文档不在范围内）
  • 请求被拦截：虽然函数配置了cors({ origin: true })，但可先简化函数逻辑，直接返回200，测试是否能收到Sanity的请求。

二、检查Firebase构建触发的权限与API正确性 #

你的triggerRebuild函数存在几个潜在问题：

1. API版本与端点错误：当前使用的v1beta1为测试版本，Firebase Hosting正式API为v1，正确端点应为：

   const url = `https://firebasehosting.googleapis.com/v1/projects/MY_FIREBASE_PROJECT_ID/sites/MY_SITE_NAME/versions`;
   

2. 权限令牌问题：functions.config().firebase.token可能权限不足，建议用Firebase Admin SDK默认凭据获取令牌：

   const { GoogleAuth } = require('google-auth-library');
   const auth = new GoogleAuth({
     scopes: ['https://www.googleapis.com/auth/firebase.hosting']
   });
   const client = await auth.getClient();
   const token = await client.getAccessToken();
   

   之后在请求头中使用Authorization: Bearer ${token.token}
3. 构建请求Payload不完整：仅传config: {}可能不符合API要求，需确保Payload包含必要的构建配置信息。

三、排查函数内部逻辑错误 #

1. Project ID校验问题：确认MY_PROJECT_ID是正确的Sanity项目ID，无拼写错误。如果校验失败，函数会直接返回500，终止后续流程。
2. Sanity数据获取逻辑：查看日志中打印的Sanity API URL，直接在浏览器访问该URL，确认是否能获取到正确数据，同时检查body.dataset是否为你使用的数据集（比如production）。
3. 错误处理盲区：getSanityData中的异步操作（如fetch）若出错，是否能被外层try/catch捕获？可在该函数内添加更详细的错误日志，方便定位问题。

四、更高效的替代方案：Next.js增量静态再生（ISR） #

无需触发完整构建，Next.js的ISR可实现页面自动更新。修改你的getStaticProps：

export const getStaticProps = async () => {
  const sliderQuery = '*[_type == "homeslider"] | order(order)';
  const homeslider = await client.fetch(sliderQuery);

  const aboutusQuery = '*[_type == "aboutus"] | order(order)';
  const aboutus = await client.fetch(aboutusQuery);

  const aboutuslistQuery = '*[_type == "aboutuslist"] | order(order)';
  const aboutuslist = await client.fetch(aboutuslistQuery);

  const whyusQuery = '*[_type == "whyus"] | order(order)';
  const whyus = await client.fetch(whyusQuery);

  const whyuslistQuery = '*[_type == "whyuslist"] | order(order)';
  const whyuslist = await client.fetch(whyuslistQuery);

  return {
    props: { homeslider, aboutus, aboutuslist, whyus, whyuslist },
    revalidate: 60, // 每60秒后台重新生成页面（可按需调整）
  };
};

配置后，当用户访问页面时，若距上次生成超过设定时间，Next.js会自动从Sanity拉取新数据并更新页面，无需手动触发构建。

五、额外检查点 #

• 确认Firebase Functions部署成功：执行firebase deploy --only functions后，控制台是否提示部署完成，函数状态为活动。
• 确认Sanity Webhook配置：请求方法为POST，Payload Format为JSON（若为form-data，函数无法正确解析req.body）。

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