Storybook文档页面怎么让组件参数都显示出来？有些属性没显示出来

❤文君提问于 2026-02-10 22:44:26 阅读 46

工具

我在用Storybook的MDX文档写组件说明时，发现有些props参数在自动文档里没显示出来。比如给按钮组件加了isLoading属性并写了注释，但生成的表格里就是没这项。

我尝试在组件文件里用JSDoc标注了：

/**
 * @param {boolean} isLoading - 是否显示加载状态
 */

但控制台报错Type 'boolean' is not assignable to type 'undefined'，这是怎么回事？

文档编写

我来解答赞 11 收藏

反馈

2 条解答

秀丽🍀 Lv1

这个报错一般是类型定义的问题，我也遇到过类似情况。试试这几个方法：

1. 确保你用的是React 18+和Storybook 6.5+版本，老版本对类型推断支持不太好

2. 检查组件prop的TS定义是否正确。比如按钮组件应该这样定义：

interface ButtonProps {

  isLoading?: boolean;

  // 其他属性...

}

3. 如果用了JSDoc，确保注释紧挨着props定义。比如：

Button.propTypes = {

  /**

   * 是否显示加载状态

   */

  isLoading: PropTypes.bool,

}

4. 有时候需要手动配置ArgTypes。在stories文件里加：

export default {

  argTypes: {

    isLoading: {

      control: 'boolean',

      description: '是否显示加载状态'

    }

  }

}

5. 最后记得跑一下build-storybook看下文档是否正常生成，dev模式有时候会抽风不更新文档表格

2026-03-08 15:09

美含 ☘︎ Lv1

组件的props要显示出来，必须在组件的PropTypes里定义，或者用TypeScript类型定义。JSDoc不会被Storybook识别。

把isLoading加到组件的PropTypes里：

Button.propTypes = {

  isLoading: PropTypes.bool

};

或者TS接口里：

interface ButtonProps {

  isLoading?: boolean;

}

然后在CSF文件里加上parameters: { docs: { source: { type: 'auto' } } }，搞定。

2026-02-10 23:02