如何在Next.js中使用TypeScript定义带类型的Props？

你遇到的错误是因为TypeScript强制要求所有参数必须有明确的类型定义，而你的Home组件接收的allImageData props没有指定类型，被默认推断为any，所以编译时触发报错。下面是几种解决方法：

方法1：直接在组件参数上标注类型 #

直接在解构props的地方为allImageData指定类型，快速解决问题：

export default function Home({ allImageData }: { allImageData: { id: string; fullpath: string }[] }) {
  // ...你的组件逻辑
}

方法2：定义独立的Props接口（推荐） #

把组件的props类型抽成单独的接口，不仅代码更清晰，还能在getStaticProps里复用这个类型，避免重复定义：

// 定义Home组件的Props类型
interface HomeProps {
  allImageData: {
    id: string;
    fullpath: string;
  }[];
}

export async function getStaticProps() {
  // 复用HomeProps里的allImageData类型
  const allImageData: HomeProps['allImageData'] = getAllImages();
  return {
    props: {
      allImageData,
    },
  };
}

export default function Home({ allImageData }: HomeProps) {
  // ...你的组件逻辑
}

方法3：用Next.js的工具类型自动推导（优雅方案） #

如果你用的是Next.js，可以用官方提供的InferGetStaticPropsType工具类型，自动从getStaticProps的返回值里推导props类型，完全不用手动重复定义：

import { InferGetStaticPropsType } from 'next';

export async function getStaticProps() {
  const allImageData: { id: string; fullpath: string }[] = getAllImages();
  return {
    props: {
      allImageData,
    },
  };
}

// 自动推导getStaticProps返回的props类型
export default function Home({ allImageData }: InferGetStaticPropsType<typeof getStaticProps>) {
  // ...你的组件逻辑
}

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