Next.js中"use client"模式下params解构报错的解决求助

问题重现 #

在Next.js应用的data/[id]/page.tsx中添加"use client"指令后，通过其他页面的<Link>组件跳转访问该页面时，触发以下运行时错误：

Unhandled Runtime Error
TypeError: Cannot destructure property 'params' of 'param' as it is undefined.

直接刷新目标页面时，错误不会出现。

相关代码 #

数据列表页（data/page.tsx）：

export default async function DataPage() {
  const datas = await getData();

  return (
    <div>
      <h1>Items</h1>
      {datas?.map((data) => (
        <Data key={data._id} data={data} />
      ))}
    </div>
  );
} 

function Data({ data }: any) {
  const { _id, link, name, date } = data|| {};
  return <Link href={`data/${_id}`}><p>{name}</p></Link>;
}

详情页（data/[id]/page.tsx）：

"use client";

import { useEffect } from "react";

export default async function DataPage({ params }: any) {
  useEffect(() => {
    console.log(params);
  }, []);

  return (
    <div>
      <h1>Data</h1>
    </div>
  );
}

问题原因 #

• 客户端路由页面组件（带"use client"）不能声明为async函数。当前DataPage用了async，会导致客户端路由跳转时，Next.js无法正确传递params参数，进而出现undefined错误。
• 直接刷新页面时，Next.js会执行服务器端渲染（SSR），此时异步组件的参数传递逻辑与客户端路由跳转不同，因此不会触发错误。

解决方案 #

1. 移除组件的async声明 #

将data/[id]/page.tsx中的async关键字去掉，客户端页面组件不需要异步声明：

"use client";

import { useEffect } from "react";

export default function DataPage({ params }: { params: { id: string } }) {
  useEffect(() => {
    console.log(params);
  }, [params]);

  return (
    <div>
      <h1>Data</h1>
    </div>
  );
}

2. 明确参数类型（推荐） #

替换any类型为具体的params类型定义，比如{ params: { id: string } }，这样能获得TypeScript的类型提示，避免隐性错误。

3. 修正useEffect依赖 #

将params加入useEffect的依赖数组，确保当参数变化时，回调函数能正确执行。

额外说明 #

你的跳转链接代码<Link href={data/${_id}}>是正确的，对应data/[id]的路由结构，无需修改。

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