Next.js动态路由中useSearchParams获取ID返回Null的问题

你遇到的问题核心是：混淆了动态路由参数和URL查询参数的获取方式。

你跳转的/pages/users/${id}属于动态路由路径参数（比如/pages/users/1里的1），而useSearchParams是用来获取URL中?key=value形式的查询参数（比如/pages/users?id=1），所以用它拿动态路由参数自然会返回null。

解决方法1：客户端组件用useParams获取动态路由参数 #

修改你的UserDetail组件，替换useSearchParams为useParams：

'use client'

import { useParams } from "next/navigation";

const UserDetail = () => {
  // 用泛型指定参数类型，确保类型安全
  const params = useParams<{ id: string }>();
  const userId = params.id;

  return (
    <div className="text-gray-200">
      <h1>User Details</h1>
      <p>User ID from Router: {userId}</p>
    </div>
  );
};

export default UserDetail;

解决方法2：服务器组件直接从props读取参数 #

如果UserDetail不需要客户端交互，可以去掉'use client'标记，作为服务器组件直接接收路由参数：

// app/pages/users/[id]/page.tsx
type Props = {
  params: { id: string };
};

const UserDetail = ({ params }: Props) => {
  const userId = params.id;

  return (
    <div className="text-gray-200">
      <h1>User Details</h1>
      <p>User ID from Router: {userId}</p>
    </div>
  );
};

export default UserDetail;

额外检查 #

确认你的跳转路径和页面结构对应：你的页面文件在app/pages/users/[id]/page.tsx，所以push(/pages/users/${id})的路径是正确的，无需修改。

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