使用react-tooltip遇TS错误：data-tooltip-content属性类型不兼容

代码示例 #

<button
      type="button"
      data-tooltip-id="columns-settings-tooltip"
      className={clsx(
        styles.rowControlPanelColumnsOptions,
        isColumnsDialogVisible && styles.highlight
      )}
      data-tooltip-content={t(`${translationBase}.columnsSettings`)}
      onClick={handleColumnsControlPanel}
    >
      <Tooltip id="columns-settings-tooltip" />

      <ColumnsIcon />
    </button>

错误情况 #

给button（改用div等其他标签也会触发）添加data-tooltip-content属性时，出现TypeScript错误：Types of property 'data-tooltip-content' are incompatible.，此前使用react-tooltip库时未出现该问题。

成因分析 #

• 类型定义不匹配：react-tooltip的类型声明里，data-tooltip-content要求的是string | undefined类型，但你的t函数返回值可能包含null或其他非string类型（比如部分i18n库在翻译键不存在时会返回null或带标记的原始键），直接赋值就会触发类型不兼容。
• 库版本更新：如果近期升级了react-tooltip，新版本可能收紧了属性的类型约束。旧版本可能对该属性的类型要求更宽松（比如允许unknown或any），新版本则明确限定为string类型，导致原本能通过的代码现在报错。
• 全局类型冲突：项目里可能存在自定义的HTML元素类型扩展，覆盖了react-tooltip提供的data-*属性类型，导致类型校验时出现冲突。
• i18n类型配置问题：你的i18n库（比如react-i18next）的类型配置没正确指定翻译返回值为string，导致t函数的返回类型被推断为string | null或更宽泛的类型，和data-tooltip-content的要求不匹配。

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