imf*_*ure 5 typescript reactjs next.js next-auth next.js13
我在 Next.js 13 v13.1.1 中使用应用程序路由器，并且需要 layout.ts 文件。我使用的是打字稿，所以我需要输入RootLayout组件的 props 。Next.js 是否声明/导出或以其他方式暗示组件的proptypeRootLayout？
有关我的具体情况的更多背景信息：
\n我使用 next-auth 创建社交登录，SessionProvider 组件需要 Next.js 会话来实现此目的。经过一些实验，我意识到RootLayout在 props 中公开了一个托管会话，SessionProvider 组件可以使用它来完成所有很酷的下一步身份验证事情。
很自然地，我这样做了：
\nimport { ReactNode } from 'react';\nimport { Session } from 'next-auth';\nimport SessionInitializer from './SessionInitializer';\n\ninterface RootLayoutProps {\n children: ReactNode;\n session: undefined | null | Session;\n}\n\nexport default function RootLayout(props: RootLayoutProps) {\n const { children, session } = props;\n\n return (\n <html>\n <SessionInitializer session={session}>\n <div>{ children }</div>\n </SessionInitializer>\n </html>\n )\n}\n其中SessionInitializer是一个简单的客户端组件，如下所示：
"use client";\nimport { SessionProvider } from 'next-auth';\n\ninterface SessionInitializerProps {\n children: ReactNode;\n session: undefined | null | Session;\n}\n\nexport default function SessionInitializer(props: SessionInitializerProps) {\n return (\n <SessionProvider session={session}>\n { children }\n </Session>\n )\n}\n这在下一个开发服务器上运行得很好，但由于我的会话输入不正确而无法构建。特别是，linting 阶段抱怨我从 layout.ts 导出的 RootLayout 组件不是正确的类型。
\n这是我的确切错误的简化形式：
\n...\napp/layout.tsx\nType error: Layout "app/layout.tsx" has an invalid "default" export:\nType "RootLayoutProps" is not valid.\nELIFECYCLE\xe2\x80\x89 Command failed with exit code 1.\nERROR: command finished with error: command (absolute-path-to-root-of-next-project) pnpm run build exited (1)\n...\n那么，是的，任何人都可以向我指出可以帮助我输入 RootLayout 组件的 props 的文档或源代码，或者以其他方式建议输入组件的更好方法吗？我已经知道我的 RootLayoutProps 不可能是正确的，因为我使用“随机”第三方库中的类型来输入它。
\n预先感谢您的帮助，朋友。
\n| 归档时间： |
|
| 查看次数： |
2543 次 |
| 最近记录： |