Storybook中Tabs组件报错：Objects are not valid as a React child

错误信息 #

Error: Objects are not valid as a React child (found: object with keys {icon, label, content}). If you meant to render a collection of children, use an array instead.
  at mapIntoArray (/node_modules/.cache/.vite-storybook/deps/chunk-LWCIAKPC.js?v=909d2fcb:701:31))
  at mapChildren (/node_modules/.cache/.vite-storybook/deps/chunk-LWCIAKPC.js?v=909d2fcb:736:11))
  at Object.toArray (/node_modules/.cache/.vite-storybook/deps/chunk-LWCIAKPC.js?v=909d2fcb:754:18))
  at parseReactElement2 (/node_modules/.cache/.vite-storybook/deps/@storybook_react_preview.js?v=909d2fcb:512:49))
  at reactElementToJsxString2 (/node_modules/.cache/.vite-storybook/deps/@storybook_react_preview.js?v=909d2fcb:848:21))
  at /node_modules/.cache/.vite-storybook/deps/@storybook_react_preview.js?v=909d2fcb:1437:173
  at /node_modules/.cache/.vite-storybook/deps/chunk-LWCIAKPC.js?v=909d2fcb:737:25
  at mapIntoArray (/node_modules/.cache/.vite-storybook/deps/chunk-LWCIAKPC.js?v=909d2fcb:660:31))
  at Object.mapChildren [as map] (/node_modules/.cache/.vite-storybook/deps/chunk-LWCIAKPC.js?v=909d2fcb:736:11))

相关代码 #

Tabs.stories.tsx #

import { Tabs } from './index';
import { Meta, StoryObj } from "@storybook/react"
import { Gear, PaintBrush, PencilSimple } from "phosphor-react";

const items = [
    {
        icon: <PencilSimple size={20} />,
        label: 'Item 1',
        children: <div>Item 1 content</div>
    },
    {
        icon: <Gear size={20} />,
        label: 'Item 2',
        children: <div>Item 2 content</div>
    },
    {
        icon: <PaintBrush size={20} />,
        label: 'Item 3',
        children: <div>Item 3 content</div>
    },
];

export default {
    title: 'Components/Tabs',
    component: Tabs,
    args: {
        children: items,
        type: "default"
    },
} as Meta

export const Default:StoryObj = {

}

TabsProps.types.ts #

import { ReactNode } from "react";

interface Tab {
    label?: string;
    icon?: ReactNode,
    content: ReactNode
}

export interface TabsProps {
    type?: "default" | "secondary";
    defaultValue?: string;
    children: Tab[];
}

问题场景 #

在项目其他文件中通过<Tabs defaultValue={'tab-0'} children={items} />使用组件时能正常渲染，但在Storybook中触发上述错误。

问题原因 #

Storybook会默认把args中的children当作React原生子节点处理，尝试直接解析渲染，但你的children是自定义的Tab对象数组，并非合法的ReactNode，因此触发错误。

解决方案 #

方案1：在Story中手动渲染组件 #

修改Tabs.stories.tsx，在Default Story中添加render函数手动传入数据，同时移除args中的children配置：

export default {
    title: 'Components/Tabs',
    component: Tabs,
    args: {
        type: "default"
    },
} as Meta

export const Default: StoryObj = {
  render: () => <Tabs type="default" children={items} />
};

方案2：修改组件Props命名（更推荐） #

避免用children传递自定义对象数组（不符合React语义规范），修改TabsProps.types.ts：

export interface TabsProps {
    type?: "default" | "secondary";
    defaultValue?: string;
    tabs: Tab[]; // 将children改为tabs
}

同步更新组件内部逻辑，从props.tabs获取数据，再修改Tabs.stories.tsx的args：

export default {
    title: 'Components/Tabs',
    component: Tabs,
    args: {
        tabs: items,
        type: "default"
    },
} as Meta

项目中使用组件时也改为<Tabs defaultValue={'tab-0'} tabs={items} />，彻底避免Storybook的解析冲突。

内容的提问来源于stack exchange，提问作者Gabriel Schmidt Cordeiro