使用@fluentui/react构建时出现ITooltipProps接口扩展错误

问题原因 #

React 19 对 HTMLAttributes 接口中的 content 属性类型进行了更新，而你使用的 @fluentui/react@7.202.0 是较旧版本，其 ITooltipProps 定义的 content 属性类型（string | Element | Element[] | undefined）与 React 19 的类型（string | undefined）不匹配，导致编译错误。

可行解决办法 #

1. 升级 @fluentui/react 到兼容 React 19 的版本 #

Fluent UI 7.x 不支持 React 19，建议升级到 8.x 及以上版本（优先推荐最新稳定版）。执行以下命令：

npm install @fluentui/react@latest --save

注意：升级后可能存在组件 API 变动，需要对照官方文档检查并调整代码中的用法。

2. 降级 React 版本到 @fluentui/react@7.x 支持的范围 #

Fluent UI 7.x 官方支持 React 16.x ~ 18.x，你可以将 React 降级到 18.x 版本：

npm install react@^18.2.0 react-dom@^18.2.0 --save

3. 临时类型补丁（不推荐长期使用） #

如果暂时无法升级或降级，可以通过 TypeScript 类型声明覆盖来解决冲突：
在项目 src 目录下创建 typings.d.ts 文件，添加以下内容：

import { ITooltipProps } from '@fluentui/react';

declare module '@fluentui/react' {
  interface ITooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement | TooltipBase>, 'content'> {
    content?: string | React.ReactElement | React.ReactElement[];
  }
}

然后在 tsconfig.json 中确保该声明文件被包含：

{
  "include": ["src/**/*", "src/typings.d.ts"]
}

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