Next.js构建报错：Property 'surat'与索引签名不兼容

错误信息 #

.next/types/app/(dashboard)/approval/view/page.ts:28:13

Property 'surat' is incompatible with index signature.
    Type 'SuratApprovalType' is not assignable to type 'never'

可能的原因及解决方案 #

1. 组件Props与PageProps类型冲突 #

如果DocViewApproval组件的Props不小心继承了Next.js App Router的PageProps，就会触发该问题——PageProps带有[key: string]: never的索引签名，不允许额外自定义属性（如surat、suratId）。

• 修复方式：单独定义组件专属Props类型，避免与PageProps混用：

// 独立定义组件Props
type DocViewApprovalProps = {
  surat: SuratApprovalType;
  suratId: string;
};

// 组件仅使用自定义Props
export function DocViewApproval({ surat, suratId }: DocViewApprovalProps) {
  // 组件逻辑实现
}

2. SuratApprovalType 定义存在矛盾 #

若SuratApprovalType的类型定义存在交叉类型冲突、属性类型模糊（如any）等问题，会导致TypeScript无法正确识别类型，进而与索引签名产生冲突。

• 检查与修复：
  • 避免SuratApprovalType和带有never/宽泛索引签名的类型交叉
  • 明确所有属性的类型，杜绝模糊定义：

// 无冲突的明确类型定义
type SuratApprovalType = {
  id: string;
  title: string;
  status: 'pending' | 'approved' | 'rejected';
  // 其他属性的明确类型
};

3. useSWR返回数据类型推断异常 #

在dialog.tsx中，useSWR默认根据返回数据推断类型，若后端返回结构与SuratApprovalType不完全匹配，或未指定泛型类型，会导致构造的surat类型不符合预期。

• 修复方式：给useSWR明确指定泛型类型：

import useSWR from 'swr';

// 指定useSWR返回的类型为SuratApprovalType
const { data: surat } = useSWR<SuratApprovalType>(
  `/api/surat/${suratId}`,
  (url) => fetch(url).then(res => res.json())
);

// 确保数据存在后再传入组件
return surat ? <DocViewApproval surat={surat} suratId={suratId} /> : <div>加载中...</div>;

4. Next.js自动生成类型冲突 #

错误提示中的.next/types/文件是Next.js自动生成的页面类型，若page.tsx结构有误（比如把DocViewApproval当作页面组件默认导出，而非子组件），会导致自动生成的类型出现never索引签名。

• 检查点：
  • 确保page.tsx的默认导出是页面组件，而非DocViewApproval
  • 页面组件返回符合App Router要求的JSX内容

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