Next.js14 App Router模式下如何在layout.js中直接获取params？

首先明确：根目录下的app/layout.js属于根路由段，没有动态路由参数，所以直接解构的params是空对象。只有对应动态路由段的layout才能拿到该段的params，或者通过客户端组件在根layout中获取。

方法一：使用动态路由段的layout #

如果你的参数来自某个动态路由（比如/[slug]），把layout放到对应的动态路由文件夹下，就能直接拿到params：

比如创建app/[slug]/layout.js：

export default async function DynamicLayout({ params, children }) {
  console.log('params:', params); // 输出 { slug: "xxx" }
  // 这里可以用params请求数据
  const data = await fetch(`https://your-api.com/data/${params.slug}`).then(res => res.json());

  return (
    <div>
      <header>{data.title}</header>
      {children}
    </div>
  );
}

对应的app/[slug]/page.js：

export default function DynamicPage({ params }) {
  console.log('page params:', params);
  return <div>页面内容</div>;
}

方法二：在根layout中通过客户端组件获取params #

如果必须在根app/layout.js中获取参数，因为根layout默认是服务器组件，不能直接用useParams，需要创建一个客户端组件：

1. 创建客户端组件app/components/ClientParams.js：

'use client';

import { useParams } from 'next/navigation';

export default function ClientParams() {
  const params = useParams();
  console.log('客户端获取的params:', params);

  // 可以在这里用params请求数据（建议用SWR、React Query等客户端数据方案）
  return null; // 或渲染需要的内容
}

2. 在根layout中引入这个组件：

import ClientParams from './components/ClientParams';

export default async function RootLayout({ children }) {
  return (
    <html lang='en' className='light'>
      <body>
        <ClientParams />
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

注意：服务器组件的layout只能拿到自身所在路由段的动态参数，根路由无动态段，所以根layout直接解构的params为空，这是Next.js App Router的设计逻辑。

内容的提问来源于stack exchange，提问作者HugLemon