Next.js 13客户端组件如何从URL查询参数中获取eventId？

核心说明 #

Next.js 13 App Router体系下，客户端组件不能使用next/router的useRouter（这是Pages Router专属API），必须依赖next/navigation提供的客户端导航API来获取URL参数。

正确实现步骤 #

1. 标记组件为客户端组件
   在组件顶部添加'use client'指令，这是使用客户端导航API的必要前提：

   'use client';
   

2. 使用useSearchParams获取并处理查询参数
   通过useSearchParams提取URL中的查询参数，同时处理eventId附带的.webp后缀（你的URL中eventId包含该后缀，需去除才能匹配原始数据ID）：

   'use client';
   
   import { useSearchParams } from 'next/navigation';
   
   export default function EventDetail() {
     const searchParams = useSearchParams();
     // 获取URL中的原始eventId
     const rawEventId = searchParams.get('eventId');
     // 去除后缀得到有效ID
     const eventId = rawEventId?.replace('.webp', '');
   
     // 用处理后的eventId请求对应图片或数据
     return (
       <div>
         {eventId && (
           <img 
             src={`/your-image-storage-path/${eventId}.webp`} 
             alt="活动详情图" 
           />
         )}
       </div>
     );
   }
   

之前失败的原因排查 #

• 使用next/router的useRouter：属于Pages Router的API，App Router环境下完全不兼容，必然报错。
• 使用next/navigation的useRouter：App Router的useRouter没有query属性，它的设计逻辑和Pages Router不同，必须通过useSearchParams单独获取查询参数。
• 之前尝试useSearchParams未成功：大概率是遗漏了'use client'指令，或者未处理eventId中的.webp后缀，导致拿到的ID格式无法匹配数据。

跳转组件的传参建议 #

确保PaidsCard组件跳转时参数格式正确（以next/link为例）：

'use client';

import Link from 'next/link';

export default function PaidsCard({ eventId }) {
  return (
    <Link href={`/event?eventId=${eventId}.webp`}>
      <img src={`/your-image-storage-path/${eventId}.webp`} alt="活动卡片图" />
    </Link>
  );
}

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