Storybook Auto Doc(v7)无法读取组件默认Props与Prop类型求助

针对Webpack5+React18+Storybook7的环境，按以下步骤排查修复：

1. 确认Docs插件安装与配置 #

• 确保@storybook/addon-docs已安装：

  npm install @storybook/addon-docs --save-dev
  

• 在.storybook/main.js中确认插件已加入addons数组：

  module.exports = {
    framework: {
      name: '@storybook/react-webpack5',
      options: {}
    },
    addons: ['@storybook/addon-docs'],
    // 其他配置项
  };
  

2. 规范组件的Props定义 #

使用PropTypes的情况 #

组件文件中必须明确导出propTypes和defaultProps：

import PropTypes from 'prop-types';

const Button = ({ label, disabled }) => {
  return <button disabled={disabled}>{label}</button>;
};

Button.propTypes = {
  label: PropTypes.string.isRequired,
  disabled: PropTypes.bool
};

Button.defaultProps = {
  disabled: false
};

export default Button;

使用TypeScript的情况 #

确保Props接口定义完整，默认值直接赋值或通过defaultProps声明：

interface ButtonProps {
  label: string;
  disabled?: boolean;
}

const Button = ({ label, disabled = false }: ButtonProps) => {
  return <button disabled={disabled}>{label}</button>;
};

export default Button;

3. 开启Story的自动文档标签 #

在Story文件的meta配置中添加tags: ['autodocs']，确保自动文档生成：

import Button from './Button';

export default {
  title: 'Components/Button',
  component: Button,
  tags: ['autodocs'] // 关键：开启自动文档
};

export const Primary = {
  args: {
    label: 'Primary Button'
  }
};

4. 清理缓存并重启服务 #

执行命令清理Storybook缓存，避免旧缓存导致的解析异常：

npx storybook build --clean
# 或直接删除.storybook/.cache文件夹后重启
npm run storybook

5. 排查插件冲突 #

暂时禁用非必要的Storybook插件（如自定义装饰器、主题插件等），确认是否存在插件干扰Docs的Props解析逻辑。

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