调用Bootstrap Tooltip的dispose方法报Cannot read properties of null错误如何解决

问题根源 #

1. 未给useEffect配置依赖数组，每次组件重渲染都会先触发上一轮的清理逻辑销毁所有tooltip，再重新初始化所有tooltip，无意义的频繁销毁重建是核心诱因。
2. 当tooltip处于显示状态、存在未执行完成的过渡动画回调时，直接调用dispose()销毁实例，会使Bootstrap内部待执行的动画回调访问已被置为null的实例配置属性，最终抛出对应类型错误。

修复方案 #

修改自定义Hook代码，调整三处逻辑即可解决问题：

1. 给useEffect添加正确的依赖项，避免无意义的重复执行
2. 销毁前先调用hide()方法终止tooltip的动画流程
3. 初始化前检查元素是否已绑定Tooltip实例，避免重复初始化

完整修复后的代码如下：

import { useEffect } from 'react';
import Tooltip from 'bootstrap/js/dist/tooltip';

function useInitializeTooltips({ trigger = "hover focus" } = {}) {
  useEffect(() => {
    const tooltipTriggerElements = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    const initializedTooltipList = [];

    tooltipTriggerElements.forEach(el => {
      // 跳过已初始化的元素，避免重复绑定
      const existingInstance = Tooltip.getInstance(el);
      if (existingInstance) {
        initializedTooltipList.push(existingInstance);
        return;
      }
      initializedTooltipList.push(new Tooltip(el, { trigger }));
    });

    return () => {
      initializedTooltipList.forEach(tooltip => {
        // 先隐藏tooltip终止所有动画逻辑
        tooltip.hide();
        // 销毁实例
        tooltip.dispose();
      });
    };
  // 仅trigger参数变更时重新执行初始化
  }, [trigger]);
}

export default useInitializeTooltips;

如果仍偶现报错，可以在初始化Tooltip时关闭过渡动画，彻底规避动画回调带来的副作用：

new Tooltip(el, { trigger, animation: false })

优化建议 #

如果使用react-router时需要处理页面切换后的tooltip残留问题，可以将该Hook放在顶层Layout组件中调用，同时将路由路径添加到useEffect的依赖数组中，路由变更时自动触发一次清理+重新初始化逻辑即可。

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