NextJS 属性“组件”在类型“App<{}、{}、{}>”上不存在答案

【问题标题】：NextJS Property 'Component' does not exist on type 'App<{}, {}, {}>'NextJS 属性“组件”在类型“App<{}、{}、{}>”上不存在
【发布时间】：2021-04-25 09:27:33
【问题描述】：

我将 NextJS 与 Typescript 一起使用，当我尝试构建代码时，_app.tsx 文件中出现以下错误：

“App”类型上不存在属性“组件”。

我从 AppProps 类型 ('next/app') 中获取 Component，代码如下：

import React from "react";
import { CssBaseline } from "@material-ui/core";
import { ThemeProvider } from "@material-ui/core/styles";
import theme from "../themes";
import AppProps from "next/app";

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

有什么想法吗？

【问题讨论】：

查看 Typescript 文档，您应该在导入时解构 AppProps：nextjs.org/docs/basic-features/typescript#custom-app
就是这样，最后它很容易解决。非常感谢！

标签： reactjs typescript next.js

【解决方案1】：

AppProps 应该从“next/app”作为正常导出导入，而不是默认导出。这是一个例子：

import '../styles/globals.css';
import { AppProps } from 'next/app';

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

注意 AppProps 导入周围的“{ }”符号。

希望对你有帮助！

【讨论】：