Next.js 13 App Router读取动态路由参数报错求助

方案1：服务器组件直接接收参数（推荐） #

如果页面不需要客户端交互，可移除"use client"指令，直接通过页面组件的props获取路由参数：

// app/MainThema/[themenID]/page.js
export default function MainThema({ params }) {
  const { themenID } = params;

  return <div>MainThema ID: {themenID}</div>;
}

方案2：客户端组件使用useParams钩子 #

若必须使用客户端组件（保留"use client"），不要通过useRouter获取参数，改用next/navigation提供的useParams钩子：

"use client";
import { useParams } from "next/navigation";
import React from "react";

export default function MainThema() {
  const params = useParams();
  const { themenID } = params;

  return <div>MainThema ID: {themenID}</div>;
}

核心说明 #

• App Router中，useRouter（来自next/navigation）仅提供路由跳转方法（如push、replace），不再包含query属性。
• 动态路由参数统一通过params对象获取：服务器组件直接从props提取，客户端组件用useParams钩子获取。

内容的提问来源于stack exchange，提问作者Captai-N