Next.js 13+ App Router 要求 layout 组件的 default export 函数仅接收 children 参数，若在自定义 Props 类型中显式声明 children、params 或 searchParams，将触发类型校验失败——核心原因在于 Next.js 内部对 layout 的 props 有严格契约约束。
next.js 13+ app router 要求 layout 组件的 `default export` 函数仅接收 `children` 参数，若在自定义 `props` 类型中显式声明 `children`、`params` 或 `searchparams`，将触发类型校验失败——核心原因在于 next.js 内部对 layout 的 props 有严格契约约束。
在 Next.js 的 App Router 中，layout.tsx 文件的 default export 函数（即布局组件）必须且只能接收 children: React.ReactNode 这一参数。它不支持直接解构 params 或 searchParams ——这些对象仅可用于 generateMetadata、generateStaticParams 或页面组件（page.tsx）中。
你遇到的报错：
Layout "app/[prefName]/create/layout.tsx" has an invalid "default" export: Type "Props" is not valid.
本质是 Next.js 类型系统在构建时执行了严格校验（见其内部 checkFields<Diff<LayoutProps, FirstArg<TEntry['default']>, 'default'>>()），要求 layout 默认导出函数的参数类型必须与预设的 LayoutProps 完全兼容。而 LayoutProps 的定义不含 params 和 searchParams 字段，仅隐式包含 children。当你在 Props 类型中显式写入：
type Props = {
children: React.ReactNode; // ❌ 错误：children 不应出现在 LayoutProps 的泛型约束中
params: { prefName: string };
searchParams: { [key: string]: string | string[] | undefined };
};TypeScript 就会因 searchParams 的索引签名 { [key: string]: ... } 与 LayoutProps 的严格 { [x: string]: never } 约束冲突，抛出 Type '...' is not assignable to type 'never' 错误。
✅ 正确做法是：分离关注点
- generateMetadata 可安全接收 { params, searchParams }（Next.js 明确支持）；
- default export 函数只接收 children，其他数据需通过上下文、服务端计算或嵌套页面组件获取。
✅ 修正后的代码（推荐写法）
// app/[prefName]/create/layout.tsx
import type { Metadata } from "next";
import { lookupPrefecture } from "@/config/prefectures";
// ✅ generateMetadata 支持完整参数
export async function generateMetadata(
{ params, searchParams }: {
params: { prefName: string };
searchParams: Record<string, string | string[] | undefined>;
}
): Promise<Metadata> {
const { prefName } = params;
const encodedPrefName = decodeURIComponent(prefName);
const prefectureName = lookupPrefecture(encodedPrefName);
return {
title: `${prefectureName} | Create Post`,
openGraph: {
images: ["/some-specific-page-image.jpg"],
},
};
}
// ✅ Layout 组件只接收 children —— 这是强制约定
export default function CreateLayout({ children }: { children: React.ReactNode }) {
return <>{children}</>;
}⚠️ 注意事项
- 不要为 layout 组件定义含 params/searchParams 的统一 Props 类型：这会破坏 Next.js 的类型契约；
- children 是唯一允许且必需的 prop，不可省略，也不可与其他路由参数混入同一类型；
- 若需在 layout 内访问 params（例如动态设置 class name），请改用 useRouter().params（客户端）或将逻辑下沉至 page.tsx 或自定义 Server Component（服务端更推荐）；
- generateMetadata 的第二个参数 parent: ResolvingMetadata 可选，用于继承父级元数据，按需启用；
- 所有 params 解析（如 decodeURIComponent）应在服务端执行，确保 SSR/SSG 兼容性。
? 验证建议
运行以下命令确认修复效果：
yarn build # 应成功通过类型检查与编译 yarn dev # 启动开发服务器，验证布局渲染与元数据注入
遵循这一约定，不仅能解决当前报错，还能确保 layout 在静态生成（SSG）、服务端渲染（SSR）及 React Server Components 生态中稳定运行。
