forwardRef包裹组件致Storybook Controls面板渲染不全的解决办法

Storybook的Controls面板依赖TypeScript类型解析来自动生成可编辑参数，但React.forwardRef返回的组件默认会被标记为ForwardRefExoticComponent类型，这种类型会隐藏自定义ButtonProps接口中除children外的大部分属性信息，导致Storybook无法正确识别其余props，最终只显示children参数。

有两种可行的解决方式：

方式一：给组件添加精确类型断言 #

在组件文件中，为forwardRef返回的结果声明明确的类型，让Storybook能正确读取ButtonProps的完整结构：

import React, { forwardRef, ForwardRefExoticComponent, RefAttributes } from 'react';

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md';
  children: React.ReactNode;
}

// 实现组件逻辑
const ButtonBase = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
  const { variant, size, children, ...rest } = props;
  return (
    <button 
      ref={ref} 
      className={`btn ${variant ? `btn-${variant}` : ''} ${size ? `btn-${size}` : ''}`}
      {...rest}
    >
      {children}
    </button>
  );
});

// 为组件添加精确类型断言
const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = ButtonBase;

export default Button;

方式二：在Storybook故事中手动声明argTypes #

若不想修改组件文件，可在对应stories文件里手动定义argTypes，明确告知Storybook需要展示的props：

import type { ComponentMeta, ComponentStoryObj } from '@storybook/react';
import Button from './Button';

const meta: ComponentMeta<typeof Button> = {
  title: 'UI/Button',
  component: Button,
  // 手动配置Controls面板要展示的props
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary'],
      description: '按钮样式变体'
    },
    size: {
      control: 'select',
      options: ['sm', 'md'],
      description: '按钮尺寸'
    },
    onClick: {
      action: '按钮被点击',
      description: '点击事件回调'
    }
  }
};

export default meta;
type Story = ComponentStoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    variant: 'primary',
    children: '主要按钮'
  }
};

如果项目使用了@storybook/addon-docs，确保已正确配置TypeScript支持，可进一步提升类型推断的准确性。

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