Next.js JS项目app.jsx中如何为pageProps定义PropTypes

你在_app.jsx里接收到的pageProps是Next.js路由跳转时，由各个页面的getStaticProps、getServerSideProps或客户端数据获取方法返回的透传属性集合，没有全局固定结构，结合你已经解构出session字段的写法，按以下方式定义即可通过ESLint校验、符合PropTypes规范：

• 首先确保项目已安装prop-types依赖：

npm install prop-types
# 可替换为yarn/pnpm对应的安装命令

• 在组件文件中引入PropTypes，给组件挂载propTypes静态属性，完整代码参考：

import PropTypes from 'prop-types';
// 保留你原有其他引入：ThemeProvider、theme、globalStyles等

const App = ({ Component, pageProps: { session, ...pageProps } }) => {
    const getLayout = Component.getLayout || ((page) => page);
    return (
        <ThemeProvider theme={theme}>
          {globalStyles}
          {getLayout(<Component {...pageProps} />)}
        </ThemeProvider>
    );
};

App.propTypes = {
  // 你已知的Component类型定义
  Component: PropTypes.elementType.isRequired,
  // 定义pageProps的类型
  pageProps: PropTypes.shape({
    // 显式声明你解构使用的session字段，类型可根据业务调整
    // 如果是next-auth的session，可细化为PropTypes.shape({ user: PropTypes.object, expires: PropTypes.string })
    session: PropTypes.object,
    // 其余透传给页面组件的属性无需额外声明，PropTypes.shape默认不会校验未列出的字段
  }).isRequired,
};

export default App;

关键说明 #

• 不要直接给pageProps写PropTypes.object.isRequired：这种写法没有声明你解构使用的session字段，会触发ESLint的react/prop-types规则报错，提示session字段未做类型校验。
• session字段是否加.isRequired根据你的业务逻辑判断：如果应用所有页面都要求必须存在登录态，就加上.isRequired；如果允许未登录访问、session可能为null/undefined，保留示例写法即可。
• 如果你的ESLint配置开启了react/forbid-prop-types规则禁止直接使用PropTypes.object，可以根据session的实际结构细化字段类型，剩余透传的页面属性不需要额外处理，不会触发规则报错。

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