为何Home函数的props参数反复出现且触发TypeScript错误？

一、消除TypeScript错误 #

针对你遇到的两个TS报错，有两种可靠解决方式：

1. 完全移除props参数（推荐，若确实不需要） #

直接修改函数定义：

export default function Home() {
  // 原有代码逻辑保持不变
}

此操作会直接消除'props' is declared but its value is never read和Parameter 'props' implicitly has an 'any' type两个错误。

2. 保留参数但规避报错（适用于无法移除的场景） #

如果因编辑器或工具强制添加props，可通过以下方式消除报错：

• 用下划线前缀标记未使用参数，并指定明确类型：

  // 定义空接口，明确组件无props需求
  interface HomeProps {}
  export default function Home(_props: HomeProps) {
    // 原有代码逻辑保持不变
  }
  

  或更简洁的写法：

  export default function Home(_props: unknown) {
    // 原有代码逻辑保持不变
  }
  

  下划线前缀会告知TypeScript你刻意忽略该参数，同时指定类型可避免隐式any错误。

二、解决props自动重现的问题 #

删除props后保存又自动出现，大概率是编辑器或代码工具的自动行为，按以下步骤排查：

• 检查VS Code代码片段/补全：查看是否有自定义或内置的Next.js页面组件片段会自动生成props参数，可在VS Code「用户代码片段」中搜索nextjs相关片段并修改。
• 检查ESLint规则：若使用eslint-plugin-next，确认是否有规则强制页面组件必须接收props，可在.eslintrc中禁用相关规则。
• 检查格式化工具：比如Prettier或ESLint的自动修复功能，是否有配置会自动添加props参数，可暂时关闭自动保存时的修复功能排查原因。
• Next.js路由模式确认：Next.js 13+的App Router中，页面组件默认不需要props；Pages Router中，仅当使用getServerSideProps/getStaticProps时才需要接收props，若未用到这些数据，完全可以移除参数。

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