Storybook中Type被误显示为Controls的问题求助

核心排查方向 #

Storybook的Controls会自动解析组件Props的TypeScript类型，出现继承属性意外显示，通常是类型定义不够精确或Story配置未过滤属性导致的，按以下步骤排查：

1. 精确控制Props类型（推荐） #

如果MediaCardProps不需要Post的全部属性，别直接用type MediaCardProps = Post & { ... }，改用Pick或Omit精准筛选：

// 只保留Post中需要的属性，再添加自定义属性
type MediaCardProps = Pick<Post, 'title' | 'coverImg'> & {
  showFooter: boolean;
};

// 或者排除Post中不需要的属性
type MediaCardProps = Omit<Post, 'id' | 'createdAt'> & {
  showFooter: boolean;
};

这样TypeScript只会暴露指定属性，Storybook Controls也不会解析到多余的继承字段。

2. 在Story中手动过滤属性 #

如果不想修改类型定义，直接在Story的argTypes里禁用不需要显示的属性：

import { Meta, StoryObj } from '@storybook/react';
import MediaCard from './MediaCard';

const meta: Meta<typeof MediaCard> = {
  title: 'Components/MediaCard',
  component: MediaCard,
  argTypes: {
    // 把Post中不需要显示的属性设为禁用
    id: { table: { disable: true } },
    createdAt: { table: { disable: true } },
    authorId: { table: { disable: true } },
  },
};

export default meta;
type Story = StoryObj<typeof MediaCard>;

export const Default: Story = {
  args: {
    title: '示例标题',
    coverImg: 'https://example.com/img.jpg',
    showFooter: true,
  },
};

3. 检查组件Props定义 #

确认组件接收的Props严格对应MediaCardProps，避免不小心传入整个Post类型：

// 正确写法
const MediaCard = (props: MediaCardProps) => {
  // 组件逻辑
};

// 错误写法（会导致Storybook识别到Post的全部属性）
const MediaCard = (props: Post & MediaCardProps) => {
  // 组件逻辑
};

4. 调整Docs参数过滤属性 #

如果用了Storybook Docs插件，也可以通过parameters.docs.props.exclude全局过滤：

const meta: Meta<typeof MediaCard> = {
  title: 'Components/MediaCard',
  component: MediaCard,
  parameters: {
    docs: {
      props: {
        exclude: ['id', 'createdAt'], // 排除不需要展示的属性
      },
    },
  },
};

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