Nextjs：ts（7031）类型错误：绑定元素“Component”隐式具有“any”类型

Question

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

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

Answer 1

解决这个问题的方法很简单。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