首次使用Storybook：父组件渲染时报子组件接口未导出错误

DevOps 小满

2026-7-19

问题排查与解决步骤

针对StatsBar和Comment组件渲染报错（提示子组件接口导出不存在，但子组件单独在Storybook可正常展示），可从以下方向逐一排查：

1. 核对接口导入与导出的匹配性

确认父组件（如StatsBar）中导入子组件接口的语法，与子组件interface.ts的导出方式完全一致：

若子组件接口为命名导出：

// AuthenticationModal/interface.ts
export interface AuthenticationModalProps { /* 接口定义 */ }

父组件必须使用命名导入：

// StatsBar组件内
import { AuthenticationModalProps } from '../AuthenticationModal/interface';

禁止误用默认导入（import AuthenticationModalProps from '...'）。

若子组件使用默认导出，需同步调整父组件的导入语法。

2. 验证相对路径准确性

检查父组件中导入子组件interface.ts的相对路径是否正确，避免因目录层级变化导致路径错误。例如StatsBar与AuthenticationModal同级时，路径应为./AuthenticationModal/interface.ts而非../。

3. 清理Storybook缓存并重启

Storybook缓存可能残留旧的模块导出信息，执行以下命令清理后重启：

# 清理缓存
npx storybook clean
# 重启Storybook服务
npm run storybook

4. 同步组件库与Storybook的解析配置

若组件库使用tsconfig.json设置了baseUrl或paths别名，需在Storybook配置文件（.storybook/main.ts）中同步配置：

// .storybook/main.ts
import { mergeConfig } from 'vite';
import path from 'path';

export default {
  // 其他Storybook配置
  viteFinal: async (config) => {
    return mergeConfig(config, {
      resolve: {
        alias: {
          '@': path.resolve(__dirname, '../src'), // 与tsconfig.json的别名保持一致
        },
      },
    });
  },
};

同时确认构建工具（Vite/Rollup）已将interface.ts纳入编译范围，未被排除或忽略。