NextJS 14.2中如何在服务器操作中获取动态路由参数？

方法一：从服务器组件直接传递参数（推荐） #

页面组件作为服务器组件可直接通过params拿到eventId，只需将其作为参数传入服务器操作即可，这是最直接可靠的方式：

page.tsx

// app/events/[eventId]/register/page.tsx
import { registerUser } from './actions';

export default async function RegisterPage({ params }: { params: { eventId: string } }) {
  const { eventId } = params;

  return (
    <form action={async (formData) => {
      await registerUser(formData, eventId);
    }}>
      {/* 表单元素 */}
      <button type="submit">完成注册</button>
    </form>
  );
}

actions.ts

// app/events/[eventId]/register/actions.ts
'use server';

export async function registerUser(formData: FormData, eventId: string) {
  // 直接使用eventId执行注册逻辑
  console.log('当前活动ID:', eventId);
}

方法二：通过请求头解析URL获取参数 #

如果不想从组件传参，可通过headers()获取当前请求的URL，再从中解析出eventId，但这种方式依赖路由结构，路由变更时需同步调整解析逻辑：

'use server';
import { headers } from 'next/headers';

export async function registerUser(formData: FormData) {
  const headersList = headers();
  const requestUrl = headersList.get('referer') || `${headersList.get('origin')}${headersList.get('pathname')}`;
  
  if (!requestUrl) throw new Error('无法获取当前请求路径');

  // 解析URL路径段提取eventId
  const pathSegments = new URL(requestUrl).pathname.split('/');
  const eventId = pathSegments[pathSegments.indexOf('events') + 1];

  if (!eventId) throw new Error('未找到活动ID参数');
  console.log('当前活动ID:', eventId);
  // 执行注册逻辑
}

方法三：客户端组件通过useParams传递参数 #

若表单是客户端组件，可使用useParams钩子获取路由参数后传入服务器操作：

'use client';
import { useParams } from 'next/navigation';
import { registerUser } from './actions';

export default function RegisterClientForm() {
  const params = useParams<{ eventId: string }>();
  const eventId = params.eventId;

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    await registerUser(formData, eventId);
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单元素 */}
      <button type="submit">完成注册</button>
    </form>
  );
}

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