Next.js 13 App Router嵌套服务端组件如何获取动态URL参数？

对于深层嵌套的服务端组件，无法像客户端组件那样直接通过钩子获取URL中的slug参数，必须通过指定方式实现，无需逐层传参的方案可借助React Context。

核心限制 #

服务端组件在服务器端渲染，没有浏览器端的路由运行环境，因此不能使用useParams、useRouter这类客户端专属钩子，必须通过组件树传递参数。

解决方案1：逐层传递Props（最直接） #

这是最直观的实现方式，从页面组件开始逐层将slug传递给嵌套组件：

// app/blog/[slug]/page.tsx
export default function Page({ params }: { params: { slug: string } }) {
  return <MyPost slug={params.slug} />
}

// MyPost组件
function MyPost({ slug }: { slug: string }) {
  return <div>This is the post: <PostText slug={slug} /></div>
}

// PostText组件
function PostText({ slug }: { slug: string }) {
  return <span>{slug}</span>
}

解决方案2：使用React Context统一传递（避免多层传递） #

通过创建React Context，将路由参数注入组件树，深层组件可直接从Context中获取slug，无需逐层传递：

1. 创建路由参数Context #

// app/contexts/RouteParamsContext.tsx
import { createContext, useContext } from 'react';

type RouteParams = {
  slug: string;
};

const RouteParamsContext = createContext<RouteParams | undefined>(undefined);

export function RouteParamsProvider({ children, params }: { children: React.ReactNode; params: RouteParams }) {
  return (
    <RouteParamsContext.Provider value={params}>
      {children}
    </RouteParamsContext.Provider>
  );
}

export function useRouteParams() {
  const context = useContext(RouteParamsContext);
  if (!context) {
    throw new Error('useRouteParams must be used within a RouteParamsProvider');
  }
  return context;
}

2. 在页面组件中注入参数 #

// app/blog/[slug]/page.tsx
import { RouteParamsProvider } from '@/app/contexts/RouteParamsContext';
import MyPost from './MyPost';

export default function Page({ params }: { params: { slug: string } }) {
  return (
    <RouteParamsProvider params={params}>
      <MyPost />
    </RouteParamsProvider>
  );
}

3. 深层组件直接获取参数 #

// PostText组件
import { useRouteParams } from '@/app/contexts/RouteParamsContext';

function PostText() {
  const { slug } = useRouteParams();
  return <span>{slug}</span>;
}

客户端组件的特殊情况 #

如果PostText是客户端组件（标记了"use client"），可直接使用Next.js提供的useParams钩子获取参数，无需传递：

"use client";

import { useParams } from 'next/navigation';

function PostText() {
  const params = useParams();
  return <span>{params.slug}</span>;
}

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