Bootstrap模态框特定页面报错：Uncaught TypeError无法读取hide属性

问题现象 #

Bootstrap模态框在某一特定页面无法正常触发，其他页面可正常运行。点击「Profile」按钮时，控制台抛出以下错误：

Uncaught TypeError: Cannot read properties of null (reading 'hide') at HTMLAnchorElement.

相关代码 #

<div id="settings-dropdown" class="dropdown-content1">
        <div class="profile-name-container" id="mobile">
           <div><a class="profile-name"><?php echo $_SESSION['firstName']; ?></a></div>
           <div><a class="profile-role"><?php echo $_SESSION['role']; ?></a></div>
           <hr>
        </div>

    <a class="profile-hover" href="#" data-bs-toggle="modal" data-bs-target="#viewModal" >
        <i class="bi bi-person profile-icons"></i>Profile
    </a>
    <a class="profile-hover" href="#" id="logoutBtn">
        <i class="bi bi-box-arrow-left "></i>Logout
    </a>
</div>

已尝试操作 #

• 更换Bootstrap版本
• 调整脚本加载顺序
  以上操作均未解决问题。

排查及解决方向 #

• 确认目标模态框存在：错误核心是代码尝试读取null对象的hide方法，说明当前页面不存在id="viewModal"的模态框容器。对比正常页面，检查是否漏加了模态框的HTML结构。
• 检查ID冲突或自定义脚本干扰：排查页面内是否有重复的viewModal ID，或者是否有自定义JS代码在模态框未初始化时就调用了hide方法。可暂时移除页面内的自定义脚本，测试模态框是否正常。
• 验证Bootstrap依赖加载：确保页面正确引入了Bootstrap JS及其依赖的Popper.js，且脚本在DOM完全加载后执行。可添加以下代码确保初始化时机正确：

document.addEventListener('DOMContentLoaded', function() {
  const viewModal = new bootstrap.Modal(document.getElementById('viewModal'));
});

• 排查动态渲染问题：如果模态框是通过PHP或JS动态生成的，检查生成逻辑是否在当前页面正常执行，确保点击按钮时模态框已被渲染到DOM中。

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