NextJS中如何在template.tsx获取动态路由id属性？

情况1：template.tsx作为客户端组件 #

如果你的template需要用到客户端交互逻辑，先添加客户端指令，再用useParams钩子获取id：

'use client';

import { useParams } from 'next/navigation';

export default function Template({ children }: { children: React.ReactNode }) {
  const params = useParams<{ id: string }>();
  const projectId = params.id;

  // 这里可直接使用projectId，比如传递给子组件或做客户端逻辑
  return <div>{children}</div>;
}

情况2：template.tsx作为服务端组件 #

如果要保留服务端渲染特性，直接通过props解构获取params即可，无需额外钩子：

export default async function Template({ 
  params, 
  children 
}: { 
  params: { id: string },
  children: React.ReactNode 
}) {
  const projectId = params.id;

  // 这里可直接执行服务端逻辑，比如根据id拉取项目数据
  // const project = await fetch(`/api/projects/${projectId}`).then(res => res.json());

  return <div>{children}</div>;
}

注意事项 #

• 确保你的Next.js版本在13.4及以上，template组件是该版本才进入稳定阶段的
• 服务端组件中无需额外导入工具，params会自动通过props传入
• 客户端组件必须声明'use client'才能使用useParams钩子

内容的提问来源于stack exchange，提问作者Alex H Hadik