Storybook Template接收的Args参数格式异常问题求助

问题说明 #

按照官方示例编写Storybook模板时，Template函数接收的args是包含故事描述的复杂对象，真正需要传递给组件的props嵌套在args.args中，但直接使用args.args会触发TypeScript错误，而其他开发者使用相同范式却能正常工作。使用版本为Storybook 6.5.13，相关代码和配置如下：

组件与故事代码 #

import { ComponentMeta, ComponentStory } from '@storybook/react';
import React, { FC } from 'react';

interface FooProps {
  myArg: string;
}

const Foo: FC<FooProps> = ({ myArg }) => <p>{myArg}</p>;
Foo.displayName = 'Foo';

export default {
  component: Foo,
  title: 'Foo',
} as ComponentMeta<typeof Foo>;

const Template: ComponentStory<typeof Foo> = (args) => {
  console.log(args);
  return <Foo {...args} />;
};

export const Default = Template.bind({});
Default.args = { myArg: 'Foo' };

Storybook配置 #

module.exports = {
  stories: [
    './**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  framework: '@storybook/react',
};

可能的原因与解决方案 #

1. 依赖版本不匹配 #

Storybook核心包与类型定义包版本不一致会导致类型推断错误，出现运行时与类型定义不符的情况。

解决步骤：
强制同步@storybook/react和@types/storybook__react的版本为6.5.13：

npm install @storybook/react@6.5.13 @types/storybook__react@6.5.13 --save-dev
# 或使用yarn
yarn add @storybook/react@6.5.13 @types/storybook__react@6.5.13 --dev

2. 类型定义使用错误 #

在Storybook 6.5.x中，ComponentStory类型默认接收的是Story上下文对象而非直接的组件props，官方示例可能省略了上下文解构的说明。

修正代码：
显式解构上下文对象中的args属性，并通过StoryContext类型明确约束：

import { ComponentMeta, ComponentStory, StoryContext } from '@storybook/react';

// ...

const Template: ComponentStory<typeof Foo> = ({ args }: StoryContext<FooProps>) => {
  return <Foo {...args} />;
};

如果希望直接接收props，可改用ComponentStoryFn类型（CSF 3.0兼容写法，6.5.x已支持）：

import { ComponentMeta, ComponentStoryFn } from '@storybook/react';

// ...

const Template: ComponentStoryFn<typeof Foo> = (args) => {
  return <Foo {...args} />;
};

3. TypeScript配置缺失或错误 #

确保项目的tsconfig.json包含必要配置项，以正确解析Storybook的类型：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "moduleResolution": "node",
    "strict": true
  }
}

4. 未启用TypeScript预设 #

Storybook 6.5.x需要明确启用TypeScript预设才能正确处理类型推断，在main.js中添加预设配置：

module.exports = {
  stories: [
    './**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
    '@storybook/preset-typescript' // 添加该行
  ],
  framework: '@storybook/react',
};

添加后安装依赖：

npm install @storybook/preset-typescript --save-dev

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