Next.js 13路由迁移报错及useSearchParams使用问题求助

1. 修复useSearchParams的调用方式 #

你错误地对useSearchParams()的返回值做了数组解构，实际上它直接返回一个URLSearchParams对象，并非数组。正确写法：

const searchParams = useSearchParams();

2. 简化productId的获取逻辑 #

URLSearchParams原生提供get()方法，可直接通过键名获取参数值——完全不需要用entries().find()（迭代器本身没有find方法，这也是你遇到TypeScript错误的核心原因）。

3. 移除不必要的状态管理代码 #

useSearchParams返回的对象是响应式的，当URL参数变化时组件会自动重新渲染，无需手动用useState和useEffect维护状态。

最终修正后的代码 #

import { FC } from 'react';
import { useSearchParams } from 'next/navigation';
import { ShowPage } from './ShowPage';

const ProductShow: FC = () => {
  const searchParams = useSearchParams();
  const productId = searchParams.get('productId');

  // 处理参数不存在的情况，可替换为加载提示或错误页面
  if (!productId) {
    return <div>缺少必要的产品ID</div>;
  }

  return <ShowPage productId={productId} />;
};

export default ProductShow;

额外说明 #

• 如果你在App Router目录（app/文件夹）开发，必须使用next/navigation的API；若仍在Pages Router（pages/文件夹），可以继续使用next/router，但Next.js 13推荐逐步迁移到App Router。
• searchParams.get()返回类型为string | null，必须做空值判断，避免将null传递给ShowPage组件引发新错误。

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