NextJS+TypeScript传递自定义类型Props时类型丢失问题求助

你需要给NextPage指定泛型参数来定义组件接收的Props类型，同时确保getServerSideProps返回的props结构与之一致。具体步骤如下：

1. 定义页面Props类型 #

先创建一个包含data字段的Props类型，关联你已定义的Service类型：

type DigitalServicesProps = {
  data: Service;
  // 如果接口返回的是Service数组，这里改成data: Service[]
};

2. 给NextPage传入泛型参数 #

在组件声明时，把刚才定义的Props类型传给NextPage：

const DigitalServices: NextPage<DigitalServicesProps> = ({ data }) => (
  // 你的页面内容
);

3. （可选）明确getServerSideProps的返回类型 #

为了类型检查更严谨，可以给getServerSideProps指定返回类型，确保返回的props结构正确：

export async function getServerSideProps(): Promise<{ props: DigitalServicesProps }> {
  const data: Service = (await getServices()).data;
  console.log(data);
  return {
    props: { data },
  };
}

补充说明 #

如果你的getServices接口返回的是Service数组（比如JSON数据数组），记得同步调整data的类型：

// 调整getServerSideProps中的data类型
const data: Service[] = (await getServices()).data;

// 对应的Props类型也要更新
type DigitalServicesProps = {
  data: Service[];
};

这样组件就能正确识别data的类型，不会再出现“Property 'data' does not exist on type '{}'”的错误，也完全不需要使用any类型。

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