Question

我的 _app.tsx 文件中有以下代码：

import React from 'react'
import type { AppProps } from 'next/app'

/* Import Styles */
import '@themes/index.scss'

/* Import Template */
import WithAuth from '@templates/with-auth'

// This default export is required in a new `pages/_app.js` file.
export const App = ({ Component, pageProps }: {Component: unknown, pageProps: unknown}): AppProps => {
  return (
    <WithAuth>
      <Component {...pageProps} />
    </WithAuth>
  )
}

export default App

我从 nextjs 文档中获得了 AppProps 用法，但是我用一个 WithAuth 组件包装了该组件，该组件基本上是一个带有 MaterialUI ThemeProvider 和 react 上下文提供程序的模板：

 return <div className={styles['grid-page']}>
    <ThemeProvider theme={theme}>
      <GlobalContext.Provider value={globalProps}>
        <HeaderBar />
        <main>
          { children }
        </main>
      </GlobalContext.Provider>
    </ThemeProvider>
  </div>
  }

当我这样做时，我收到打字稿错误：

pages/_app.tsx:12:3 - error TS2322: Type 'Element' is not assignable to type 'AppPropsType<Router, {}>'.
  Property 'pageProps' is missing in type 'Element' but required in type 'AppInitialProps'.

 12   return (
      ~~~~~~~~
 13     <WithAuth>
    ~~~~~~~~~~~~~~
...
 15     </WithAuth>
    ~~~~~~~~~~~~~~~
 16   )
    ~~~

  node_modules/next/dist/next-server/lib/utils.d.ts:124:5
    124     pageProps: any;
            ~~~~~~~~~
    'pageProps' is declared here.

pages/_app.tsx:14:8 - error TS2604: JSX element type 'Component' does not have any construct or call signatures.

14       <Component {...pageProps} />

我正在努力理解要在此处添加的正确类型

Answer 1

return items.stream() .collect(groupingBy(Item::getCategory, mapping(this::mapToSimpleItem, Collectors.toList()))); 应该被解构。

AppProps

NextJS 和 Context API 的打字稿错误

1 个答案: