在Storybook中使用Next.js的useSearchParams报TypeError求助

useSearchParams是Next.js App Router专属的钩子，它依赖Next.js的路由运行上下文，但Storybook的独立环境里没有这个上下文，所以直接调用会返回null，导致你调用get方法时报错。

1. 给组件加容错处理（最简单直接） #

在组件里先判断searchParams是否存在，再调用方法，避免null报错：

import { useSearchParams } from 'next/navigation';

const YourComponent = () => {
  const searchParams = useSearchParams();
  // 先检查searchParams是否存在，再处理参数
  const currentPage = searchParams 
    ? parseInt(searchParams.get('page') || '', 10) || 1 
    : 1;

  return <div>当前页码：{currentPage}</div>;
};

export default YourComponent;

2. 用Storybook Next.js插件配置模拟路由参数 #

如果你用的是@storybook/nextjs插件（官方推荐的Next.js Storybook集成方案），可以直接在stories的参数里配置模拟的searchParams：

import YourComponent from './YourComponent';

export default {
  title: '组件/YourComponent',
  component: YourComponent,
};

// 默认场景，page=1
export const 默认场景 = {
  parameters: {
    nextjs: {
      router: {
        searchParams: { page: '1' },
      },
    },
  },
};

// 页码为2的场景
export const 页码2 = {
  parameters: {
    nextjs: {
      router: {
        searchParams: { page: '2' },
      },
    },
  },
};

注意参数要放在nextjs.router.searchParams层级下，之前你可能没找对配置位置，导致模拟无效。

3. 手动Mock useSearchParams钩子 #

如果插件配置不生效，也可以直接在stories文件里mock这个钩子：

import { useSearchParams } from 'next/navigation';
import YourComponent from './YourComponent';

// Mock掉useSearchParams，返回自定义的URLSearchParams
jest.mock('next/navigation', () => ({
  useSearchParams: () => new URLSearchParams('page=1'),
}));

export default {
  title: '组件/YourComponent',
  component: YourComponent,
};

export const 默认场景 = {};

// 如果需要不同参数的场景，可以单独mock
export const 页码3 = {
  render: () => {
    jest.mock('next/navigation', () => ({
      useSearchParams: () => new URLSearchParams('page=3'),
    }));
    return <YourComponent />;
  },
};

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