React+Next.js+Prismic项目部署时getInitialProps获取文章报错求助

从你给出的错误信息来看，问题出在调用api.getByUID('blog', uid)时出现了无法编码undefined值的情况，这通常是两个核心原因导致的：要么是部署环境里的Prismic环境变量没配置，要么是uid参数为空就触发了API调用。下面一步步帮你解决：

1. 先排查部署环境的环境变量 #

开发环境下你本地的.env文件能正常加载PRISMIC_API_ENDPOINT和PRISMIC_ACCESS_TOKEN，但部署平台（比如Vercel、Netlify）不会自动读取本地的.env文件，必须手动配置这些环境变量：

• 打开你部署平台的项目设置，找到「环境变量」（Environment Variables）选项
• 添加两个变量：PRISMIC_API_ENDPOINT和PRISMIC_ACCESS_TOKEN，值和你本地.env文件里的完全一致
• 重新部署你的应用，确保环境变量生效

2. 修改getInitialProps代码，增加参数校验和异常处理 #

你的原代码没有处理uid为空的情况，也没有捕获API调用的异常，这会导致部署时出现崩溃。修改后的代码如下：

Blog.getInitialProps = async ({ query: { uid }, res }) => {
  // 先校验uid是否存在，避免传入undefined给Prismic API
  if (!uid) {
    if (res) {
      res.statusCode = 404; // 返回404状态码
    }
    return { page: null, uid: null };
  }

  try {
    // 先初始化Prismic API实例
    const api = await Prismic.getApi(process.env.PRISMIC_API_ENDPOINT, {
      accessToken: process.env.PRISMIC_ACCESS_TOKEN,
    });
    // 根据uid获取文章
    const page = await api.getByUID('blog', uid);

    // 如果没找到对应文章，返回404
    if (!page) {
      if (res) {
        res.statusCode = 404;
      }
      return { page: null, uid };
    }

    return { page, uid };
  } catch (error) {
    // 捕获并打印错误，方便排查问题
    console.error('Prismic API调用出错:', error);
    if (res) {
      res.statusCode = 500; // 返回服务器错误状态码
    }
    return { page: null, uid };
  }
};

代码修改说明： #

• 增加了uid的存在性检查，避免传入undefined触发API错误
• 使用try/catch包裹API调用逻辑，捕获网络错误或Prismic返回的异常
• 处理了文章不存在的情况，返回正确的HTTP状态码，避免应用崩溃
• 移除了不必要的pathname返回（如果你的组件不需要这个参数的话）

3. 验证修复效果 #

重新部署应用后，尝试访问一个存在的文章slug，以及一个不存在的slug，分别检查是否能正常显示内容或返回404页面，同时查看部署平台的日志，确认没有再出现之前的编码错误。

内容的提问来源于stack exchange，提问作者Kérian Pelat