React+TS+StoryBook运行报Objects are not valid as a React child错误如何解决

• 核心错误：React 函数组件默认仅第一个入参为完整的 props 对象，你定义 Button 组件时错误写了两个入参 (variant, title)：第一个参数 variant 实际拿到的是包含所有传入属性的 props 对象，第二个参数 title 拿到的是 StoryBook 自动注入的 ref 空对象。你直接将这个空对象作为内容渲染到 button 内部，直接触发了「对象不能作为 React 子元素」的报错。
• 无效传值问题：你在 Secondary、Success、Danger 的 Story 中，同时给 Button 传入了 title 属性和内部文本 children，你的组件既没有定义也没有处理 children 属性，属于冗余代码，严格 TypeScript 模式下会抛出类型错误。
• 笔误问题：Danger 对应的 Story 中，title 属性错误写为了 "Primary"，不符合业务预期。

1. 首先修复 Button 组件的参数定义，通过解构 props 拿到对应属性：

// 修改前
const Button: React.FC<IButtonProps> = (variant, title) => {

// 修改后
const Button: React.FC<IButtonProps> = ({variant, title}) => {

2. 如果你需要支持通过内部文本传入按钮内容，可扩展组件定义兼容 children：

// 扩展属性定义
export interface IButtonProps {
  variant: "primary" | "secondary" | "success" | "danger";
  title?: string;
  children?: React.ReactNode;
}

// 调整渲染逻辑，优先使用 children，兜底用 title
const Button: React.FC<IButtonProps> = ({variant, title, children}) => {
  return <button className={`button ${variant}`}>{children || title}</button>;
};

3. 清理 Story 中的冗余代码、修正笔误：

• 若统一使用 title 属性传值，删掉所有 Button 标签内部的冗余文本，比如把 <Button variant="secondary" title="Secondary">Secondary</Button> 改为 <Button variant="secondary" title="Secondary" />
• 若统一使用内部文本传值，删掉所有 title 属性，对应调整组件逻辑直接渲染 children
• 将 Danger Story 中的 title="Primary" 修正为 title="Danger"

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