我的代码遇到了一个问题，我收到了错误：
“未捕获的错误：NextRouter未在控制台中装入”。
经过调查，我发现从Next.js版本13开始，我们应该使用next/navigation而不是next/router。但是，我不知道如何做出这种改变。谁能提供一些指导或建议，如何解决这个问题？
下面是当前代码：

import { FC } from 'react';
import { useRouter } from 'next/router';
import { ShowPage } from './ShowPage';

const ProductShow: FC = () => {
  const router = useRouter();
  const productId = router.query.productId as string;

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

export default ProductShow;

我尝试使用useSearchParams修改代码以获取查询参数，尝试从URL获取特定的productId并将其设置为状态变量。

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

const ProductShow: FC = () => {
  const [searchParams] = useSearchParams();
  const [productId, setProductId] = useState<string | null>(null);

  useEffect(() => {
    const [id,] = searchParams.entries().find(([key]) => key === 'productId');
    if (id) {
      setProductId(id);
    }
  }, [searchParams]);

  if (!productId) {
    return null;
  }

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

export default ProductShow;

我期望从URL中正确获取productId并将其设置为productId状态变量。但是，当我尝试在searchParams.entries()上使用find方法时遇到了一个问题。错误消息如下：
未捕获的类型错误：useSearchParams不是函数或其返回值不可迭代
还有一个TypeScript错误：
类型“IterableIterator<[string，string]>”没有属性“find”。
任何建议将不胜感激。