在 Next.js App Router 中，useSearchParams() 仅用于读取查询参数（如 ?id=123），无法获取动态路由路径段（如 /users/123 中的 123）；应改用 useParams() 钩子来安全提取命名路由参数。

在 next.js 动态路由中，`usesearchparams()` 仅用于读取查询参数（如 `?id=123`），无法获取动态路由路径段（如 `/users/123` 中的 `123`）；应改用 `useparams()` 钩子来安全提取命名路由参数。

Next.js App Router 的动态路由机制将路径中的方括号占位符（如 [id]）解析为路由参数（route params），而非查询参数（query params）。这意味着 /pages/users/5 中的 5 是路径的一部分，需通过 useParams() 获取，而非 useSearchParams() —— 后者专为 ?id=5 这类 URL 查询字符串设计。

✅ 正确做法：在 app/pages/users/[id]/page.tsx 中使用 useParams()：

'use client';

import { useParams } from 'next/navigation';

const UserDetail = () => {
  // ✅ 正确：从动态路径 /users/[id] 中提取 id
  const { id } = useParams();

  // 注意：id 始终为 string 类型（即使路径中是数字），如需 number，请显式转换
  const userIdNumber = Number(id);

  return (
    <div classname="text-gray-200 p-4">
      <h1>User Details</h1>
      <p><strong>Path ID (string):</strong> {id}</p>
      <p><strong>Parsed ID (number):</strong> {isNaN(userIdNumber) ? 'Invalid' : userIdNumber}</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9063" title="chartjs-reporter"><img
														src="https://img.php.cn/upload/skill/000/000/081/179239514984446.jpg" alt="chartjs-reporter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill9063" title="chartjs-reporter" class="overflowclass">chartjs-reporter</a>
													<p class="overflowclass">此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill9063" title="chartjs-reporter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
    </div>
  );
};

export default UserDetail;

⚠️ 关键注意事项：

• useParams() 返回的对象类型需显式声明（如 ），以获得 TypeScript 类型安全；
• 路由参数始终为字符串，务必校验并转换（例如使用 Number() + isNaN()）；
• 不要混用 useSearchParams() 和路径参数逻辑——若需同时支持 /users/5 和 /users?search=5，应分别调用 useParams() 和 useSearchParams()；
• 确保页面文件路径严格匹配：app/pages/users/[id]/page.tsx（注意文件夹名与 [id] 占位符的一致性）。

? 补充提示：若后续需在服务端组件中读取参数，可直接通过 props.params 接收（无需钩子），例如：

// app/pages/users/[id]/page.tsx（服务端组件）
export default function UserDetailPage({ params }: { params: { id: string } }) {
  return <div>User ID: {params.id}</div>;
}

总之，区分「路径参数」与「查询参数」是 Next.js 路由开发的基础。选对钩子（useParams vs useSearchParams），才能让动态路由真正“动”起来。