Next.js 14+React 18中Context声明build时触发类型兼容错误

你遇到的错误是因为Next.js App Router对page文件的导出有严格限制：在src/app/目录下的page文件（比如你的src/app/data/index.tsx），只能导出默认的页面组件，以及框架允许的特定导出项（如metadata、generateStaticParams、generateViewport等）。你在同一个文件里导出了DataContext，这不属于框架允许的导出类型，在TypeScript严格模式下会触发类型检查错误——框架期望page文件的额外导出满足{ [x: string]: never; }约束，而DataContext是Context类型，显然不匹配。

把DataContext从page文件中分离出来，放到单独的文件中定义和导出，然后在page组件里导入使用即可。

步骤1：创建单独的Context文件 #

新建src/app/data/context.tsx，把Context的定义移到这里：

import { createContext, Context } from 'react';

// 先确保Data类型已定义（如果之前在page文件里，也要移过来）
interface Data {
  // 你的Data类型字段，比如id: string; 等
}

interface Actions {
  save: (data: Data) => Promise<boolean>,
  delete: (id: string) => Promise<boolean>,
}

// 可根据需求选择带默认值或null的版本
export const DataContext: Context<Actions | null> = createContext<Actions | null>(null);

// 或者你之前尝试的带默认值版本：
// export const DataContext: Context<Actions> = createContext<Actions>({
//   save: async (data: Data) => true,
//   delete: async (id: string) => true,
// });

步骤2：修改page文件，导入Context并使用 #

修改src/app/data/index.tsx，移除里面的Context定义，改为导入：

import { DataContext } from './context';

// 注意：delete是JavaScript关键字，最好重命名避免语法问题
export default function DataPage({ searchParams }) {
  // ...
  const [{ save, delete: deleteAction }, { data }] = useData(searchParams);
  const dataActions = { save, delete: deleteAction };
  // ...
  return (
    <DataContext.Provider value={dataActions}>
      {/* 你的页面内容 */}
    </DataContext.Provider>
  );
}

额外提示 #

• 避免在page文件中导出任何非框架指定的内容，包括Context、工具函数、常量等，都应该拆分到单独的文件中。
• 注意delete是JavaScript的关键字，直接用作变量名可能引发潜在问题，建议重命名为deleteAction之类的名称。

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