Next.js+TypeScript中_app.js的Component与pageProps缺失校验修复

有三种可行的修复方式，可根据项目需求选择：

方案一：使用TypeScript类型定义（推荐，适配TS项目） #

既然是TypeScript项目，Next.js已经提供了现成的AppProps类型，直接用它约束组件props即可，同时建议将文件重命名为_app.tsx（符合TS项目规范）：

import React from 'react';
import '../styles/globals.css';
// 导入Next.js提供的AppProps类型
import type { AppProps } from 'next/app';

// 给props指定AppProps类型
function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;

TypeScript会自动校验Component和pageProps的类型，ESLint的prop-types错误也会消失——TS的类型系统已经替代了prop-types的验证作用。

方案二：添加prop-types验证（适合保留.js文件的场景） #

如果不想改用TSX文件，可以安装prop-types包并手动声明props的验证规则：

1. 先安装依赖：

npm install prop-types
# 或者用yarn
yarn add prop-types

2. 修改_app.js代码：

import React from 'react';
import PropTypes from 'prop-types';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

// 声明props的类型验证规则
MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  pageProps: PropTypes.object.isRequired,
};

export default MyApp;

方案三：禁用ESLint的react/prop-types规则（TS项目可选） #

在TypeScript项目中，TS本身的类型检查已经能覆盖prop-types的作用，可直接在ESLint配置文件（如.eslintrc.json或.eslintrc.js）中禁用该规则：

{
  "rules": {
    "react/prop-types": "off"
  }
}

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