Nextjs：ts(7031) 类型错误：绑定元素“组件”隐式具有“任何”类型

问题描述

这是我在将 NextJS 项目转换为 TypeScript 时遇到的一个问题。在我的 _app.tsx 中，出现类型错误：Binding element 'pageProps' implicitly has an 'any' type. ts(7031)。错误可能如下所示：

我知道在 StackOverflow 的某个地方已经有了答案，但我写这篇文章是为了让将来的人可能会更容易地遇到这个问题。

解决方法

解决这个问题的方法很简单。 NextJS 导出自定义类型以解决此问题：AppProps。 它可以像这样导入：

import { AppProps } from 'next/app';

要应用类型，您可以从

重新格式化道具

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

到

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

最终产品应如下所示，假设一个未修改的 _app.tsx 文件：

import { AppProps } from 'next/app';

import '../styles/globals.css'

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

export default MyApp