Bootstrap 5 Dropdown搭配Nav Tabs使用时报Cannot read property 'children' of null错误

这个Cannot read property 'children' of null报错的核心原因是Bootstrap 5的两个组件事件冲突：将Tab的触发按钮放在Dropdown菜单内部时，点击Tab按钮会同时触发两个事件流：

• Tab组件的切换逻辑，需要完成面板切换、激活状态变更等操作
• Dropdown组件的点击关闭逻辑，会在点击菜单内元素后隐藏/处理菜单DOM
  Dropdown的关闭逻辑执行速度更快，等Tab组件后续要访问触发按钮所在的菜单节点属性时，节点已经被处理成null，就抛出了对应错误。

下面提供两种可直接落地的解决方案： #

方案1：阻止事件冒泡+手动关闭Dropdown（推荐，改动最小） #

不需要调整原有HTML结构，只需要额外新增一段JS逻辑拦截Tab按钮的点击事件即可：

document.addEventListener('DOMContentLoaded', () => {
  // 选中所有放在Dropdown里的Tab触发按钮
  const tabBtns = document.querySelectorAll('.dropdown-item[data-bs-toggle="tab"]')
  tabBtns.forEach(btn => {
    btn.addEventListener('click', e => {
      // 阻止事件向上冒泡到Dropdown父容器，避免触发自动关闭逻辑
      e.stopPropagation()
      // 手动控制Dropdown关闭
      const dropdownInstance = bootstrap.Dropdown.getInstance(document.getElementById('dropdownEx'))
      dropdownInstance.hide()
    })
  })
})

方案2：拆分组件职责，手动控制Tab切换 #

如果不想修改事件逻辑，也可以调整HTML结构解除两个组件的耦合：

1. 去掉Dropdown菜单项上的data-bs-toggle="tab"、data-bs-target等Tab原生绑定属性
2. 给Dropdown菜单绑定选择事件，选中对应选项后手动调用Tab组件的show()方法切换对应面板

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