Next.js 13+ App Router 中，Layout 组件的 default 导出函数仅接受 children 参数，自定义 Props 类型若包含 params 或 searchParams 会导致类型校验失败；正确做法是将路由参数解构逻辑移至 generateMetadata，Layout 本身保持最简签名。
next.js 13+ app router 中，layout 组件的 `default` 导出函数仅接受 `children` 参数，自定义 `props` 类型若包含 `params` 或 `searchparams` 会导致类型校验失败；正确做法是将路由参数解构逻辑移至 `generatemetadata`，layout 本身保持最简签名。
在 Next.js 的 App Router 架构中，Layout 组件（如 app/[prefName]/create/layout.tsx）有明确的类型契约：其默认导出函数仅接收 children: React.ReactNode 这一个 prop。这是由 Next.js 内部类型系统（如 LayoutProps）强制约束的——它不支持用户自行扩展 params、searchParams 等字段到 Layout 的 props 类型中。一旦你在 Props 类型中声明了 params 或 searchParams，并在 default 函数签名中使用该类型，TypeScript 就会报错：
Type "Props" is not valid.
Property 'searchParams' is incompatible with index signature.
Type '{ [key: string]: string | string[] | undefined; }' is not assignable to type 'never'.这是因为 Next.js 的类型检查器（通过 Diff 和 OmitWithTag 工具类型）会严格比对你的函数参数类型与预设的 LayoutProps 接口，而后者只允许 children 字段，其余字段（如 params）属于 generateMetadata、generateStaticParams 等专属函数的上下文。
✅ 正确写法：分离关注点
- Layout 组件仅负责结构包装，签名必须为 ({ children }: { children: React.ReactNode }) => JSX.Element；
- 路由参数（params）、搜索参数（searchParams）等动态数据，应仅在 generateMetadata、page.tsx 或服务端组件中按需解构使用。
以下是修复后的标准实践代码：
// app/[prefName]/create/layout.tsx
import type { Metadata } from "next";
import { lookupPrefecture } from "@/config/prefectures";
// ✅ Layout 自身无需 params/searchParams —— 类型仅保留 children
export default function CreateLayout({ children }: { children: React.ReactNode }) {
return <>{children}</>;
}
// ✅ generateMetadata 可安全接收完整 Props（含 params 和 searchParams）
type GenerateMetadataProps = {
params: { prefName: string };
searchParams: { [key: string]: string | string[] | undefined };
};
export async function generateMetadata(
{ params, searchParams }: GenerateMetadataProps,
): 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 创建泛型 Props 并复用到 default 导出——即使字段名一致，类型系统也会拒绝；
- searchParams 在 Layout 中不可用（也不应需要），如需基于查询参数定制布局逻辑，请改用 page.tsx 或服务端组件 + useSearchParams()（客户端）或 searchParams 参数（服务端组件）；
- 若需在 Layout 内访问 params（例如动态加载地区配置），可借助 await import('@/lib/getPrefectureByParam') 等服务端调用方式，而非通过 props 传入；
- 所有 generateMetadata、generateStaticParams 等生成式函数的参数类型，均应独立定义，与 Layout 的 props 完全解耦。
总结：Next.js 的 Layout 是「静态容器」，不是「动态路由处理器」。坚守 children-only 签名，把参数处理交给更合适的生命周期钩子（如 generateMetadata），即可彻底规避此类类型错误，并符合 App Router 的设计哲学。
