Next.js项目使用Context API部署时出现构建错误求助

1. 修复Context默认值与类型定义的匹配问题 #

你的Context类型声明为null | GlobalConfigContextType，但默认值传入的是{ config }，本地开发时类型检查宽松不会报错，但生产构建时严格的TypeScript检查会触发问题。可以按以下两种方式调整：

• 如果所有使用Context的组件都被Provider包裹，直接移除null类型：

  const GlobalConfigContext = React.createContext<GlobalConfigContextType>({ config });
  

• 保留null类型的话，在自定义Hook中添加兜底判断，避免组件拿到空值：

  export const useGlobalConfigContext = () => {
    const context = useContext(GlobalConfigContext);
    if (!context) {
      throw new Error('useGlobalConfigContext必须在GlobalConfigContextProvider内部使用');
    }
    return context;
  };
  

2. 确保pageProps中的config字段始终存在 #

部署构建时，若部分页面的getStaticProps/getServerSideProps未返回config，会导致pageProps.config为undefined，传入Context后组件访问属性时触发报错。

• 检查所有页面的数据获取逻辑，确保返回完整的config对象
• 在_app.tsx中添加兜底默认值，避免config为空：

  function App({ Component, pageProps, err }: AppPropsWithLayout): JSX.Element {
    const { layoutProps, session, config = {
      canAddUser: false,
      canEditUser: false,
      canDeleteUser: false,
      canLoginLocally: false,
    }, ...modifiedPageProps } = pageProps as IDocumentPageData;
    // 剩余代码保持不变
  }
  

3. 组件中严格处理Context数据访问 #

生产构建的静态分析会严格校验类型，组件访问Context属性前必须做存在性判断：

// 示例组件使用Context的正确方式
const SomeComponent = () => {
  const { config } = useGlobalConfigContext();
  // 确保config存在后再访问属性
  if (!config) return null;
  
  return <div>{config.canAddUser ? '可添加用户' : '不可添加用户'}</div>;
};

4. 本地启用严格类型检查提前发现问题 #

本地开发模式（next dev）的类型检查较宽松，部署构建（next build）会启用严格模式。修改tsconfig.json开启严格检查，提前在本地排查问题：

{
  "compilerOptions": {
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  }
}

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