在 Storybook 文件中使用 useSearchParams 时出现“TypeError：无法读取 null 的属性（读取 'get'）”

Question

我的组件中有以下 Next.js 代码：

import { useSearchParams } from 'next/navigation';

const searchParams = useSearchParams();
const currentPage = parseInt(searchParams.get('page') || '', 10) || 1;

我在故事书中遇到此错误

stories

：

类型错误：无法读取 null 的属性（读取“get”）

违规行是这样的：

const currentPage = parseInt(searchParams.get('page') || '', 10) || 1;

阅读官方故事书docs后，我尝试了这个：

const meta: Meta<typeof ItemModal> = {
  title: 'Example/List',
  component: ItemModal,
  parameters: {
    nextjs: {
      appDirectory: true,
      navigation: {
        searchParams: {
          page: '1',
        },
      },
    },
  },
};

还有这个：

navigation: {
  segments: [
    ['page', '1'],
  ],
},

还有这个：

navigation: {
  segments: [['?page=1']],
},

但我仍然遇到同样的错误。

我做错了什么？

也发布于这里。

更新：我做了

console.log('seachParams:', searchParams);

并且它正在返回

null

即使我做了这个。

这是完整的组件。

Answer 1

根据

docs

，

useSearchParams 挂钩仅适用于接下来的客户端组件。

我的猜测：在组件顶部添加

"use client"