React Fluent UI v9 替换完整插槽遇TypeScript错误及文档问题

一、修正文档中的JavaScript语法错误 #

官方文档里的代码大概率是在slots属性赋值时遗漏了=符号，正确写法如下：

// 错误写法（缺少=）
<Component slots{{ root: CustomRoot }} />
// 正确写法
<Component slots={{ root: CustomRoot }} />

二、解决TypeScript类型错误 #

结合Fluent UI插槽替换的常见类型问题，以下是针对性解决方案：

1. 推导原插槽的Props类型 #

使用Fluent UI提供的ComponentPropsFromSlot工具类型，获取目标插槽的完整props类型：

import { ComponentPropsFromSlot, Button } from '@fluentui/react-components';

// 获取Button组件root插槽的props类型
type ButtonRootProps = ComponentPropsFromSlot<Button['slots']['root']>;

2. 让自定义组件适配插槽类型 #

确保自定义组件接收并传递正确的props类型：

// 自定义root组件，严格匹配ButtonRootProps类型
const CustomButtonRoot = (props: ButtonRootProps) => {
  return <div {...props} className={`${props.className} custom-root`} />;
};

3. 正确传递插槽组件 #

在使用组件时，通过slots传入自定义组件，若需覆盖props则用slotProps：

<Button 
  slots={{ root: CustomButtonRoot }}
  slotProps={{ root: { className: 'additional-custom-class' } }}
>
  自定义按钮
</Button>

常见错误排查点 #

• 类型不兼容：自定义组件未接收原插槽的必要props（如ref、className、style），需通过ComponentPropsFromSlot确保类型全覆盖。
• 插槽名称错误：确认替换的插槽名称是组件官方支持的（比如Button的插槽包含root、icon、content等）。
• 版本差异：确保你的Fluent UI依赖版本与文档版本一致，不同版本的插槽API可能存在细微差异。

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