在 Next.js App Router 中，服务端组件无法使用 usePathname，但可通过解构 params 属性直接获取动态路由参数（如 [id]），无需客户端逻辑或额外 hooks。
在 next.js 13 的 app router 中，服务端组件无法使用 `usepathname`，但可通过解构 `params` 属性直接获取动态路由参数（如 `[id]`），无需客户端逻辑或额外 hooks。
Next.js 的 App Router 将动态路由段（例如 [id]、[slug] 或 [...nested]）自动解析为 params 对象，并作为 prop 传入服务端 page.tsx 组件。这是服务端渲染（SSR）和静态生成（SSG）场景下获取路径信息的标准且推荐方式。
✅ 正确用法：通过 params 解构获取动态值
// app/[id]/page.tsx
export default function Page({ params }: { params: { id: string } }) {
const { id } = params;
return (
<main><h1>当前 ID：{id}</h1>
<p>该组件在服务端渲染，无客户端依赖。</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>
</main>
);
}
? 注意：params 类型必须显式声明（如 { params: { id: string } }），否则 TypeScript 会报错；若存在多个动态段（如 app/[category]/[product]/page.tsx），params 将包含全部键：{ category: string; product: string }。
⚠️ 常见误区与注意事项
- ❌ 不要尝试在服务端组件中调用 usePathname、useRouter 等客户端 Hook —— 这将导致 "React Server Components do not support Hooks" 运行时错误。
- ❌ 不要依赖 headers() 或 cookies() 解析 URL 路径 —— 路由参数已由 Next.js 框架精准注入 params，手动解析既冗余又易出错。
- ✅ 若需完整 URL（如 https://example.com/123），服务端组件中可结合 headers() 获取 host 和 x-invoke-path（非标准），但不推荐；真正需要全路径的场景（如 Open Graph 标签、分享链接）应优先使用 generateMetadata 中的 metadataBase + params 构造，或改用 generateStaticParams 配合动态元数据。
? 补充：嵌套路由与可选/捕获段
- 可选动态段 [id]? → params.id 可能为 undefined，需做空值检查；
- 捕获所有段 [...slug] → params.slug 是字符串数组（如 /a/b/c → ['a', 'b', 'c']）；
- 混合使用（如 [category]/[...items]）→ params 同时包含 category: string 和 items: string[]。
总之，在服务端组件中，params 是获取动态路径标识符的唯一、可靠且零成本的方式 —— 它由 Next.js 在渲染前解析完成，安全、类型友好，且完全契合服务端优先的设计哲学。
