Bootstrap Modal动态渲染报错：Uncaught TypeError: Illegal invocation

先说明白：模板字面量（${}）本身不会导致Bootstrap模态框报错，这个错误的本质是非法调用了API方法，或者传递了不符合要求的内容参数。下面结合常见场景给出解决办法：

常见错误场景及修复方案 #

1. 直接把DOM元素拼进模板字面量

如果你直接把DOM节点通过模板字面量拼接后插入模态框，就会触发错误。Bootstrap处理模态框内容时，要么要纯HTML字符串，要么要正确的DOM元素引用，不能直接把DOM对象当字符串拼。

错误示例：

const elem = document.getElementById('some-element');
// 错误：DOM对象会被转成[object HTMLElement]，Bootstrap解析时出错
const content = `<div>${elem}</div>`;
document.querySelector('.modal-body').innerHTML = content;

怎么改：
要么直接插入DOM元素，要么把DOM转成HTML字符串：

const elem = document.getElementById('some-element');
// 方式1：直接插入DOM
document.querySelector('.modal-body').innerHTML = '';
document.querySelector('.modal-body').appendChild(elem);

// 方式2：转成HTML字符串再插入
const content = `<div>${elem.outerHTML}</div>`;
document.querySelector('.modal-body').innerHTML = content;

2. 调用模态框API时上下文错了

比如用箭头函数绑定this，或者手动调用call()/apply()改变了模态框实例的上下文，导致Bootstrap内部方法调用出错。

错误示例：

const myModal = new bootstrap.Modal(document.getElementById('myModal'));
// 错误：手动绑定this导致上下文不对
setTimeout(() => {
  myModal.show.call(this);
}, 1000);

怎么改：
直接调用API方法就行，不用手动绑定this：

const myModal = new bootstrap.Modal(document.getElementById('myModal'));
setTimeout(() => {
  myModal.show();
}, 1000);

3. 模板字面量里拼了非字符串对象

如果模板里拼接了自定义对象、Date这类非字符串/数字类型的值，会被转成[object Object]，Bootstrap处理时可能触发错误。

错误示例：

const user = {name: 'John', age: 30};
// 错误：对象直接拼接会变成[object Object]
const content = `<div>用户信息：${user}</div>`;
document.querySelector('.modal-body').innerHTML = content;

怎么改：
要么提取对象属性拼接，要么把对象转成字符串：

const user = {name: 'John', age: 30};
// 方式1：提取属性
const content = `<div>用户信息：${user.name}，年龄${user.age}</div>`;
// 方式2：转成JSON字符串
const content = `<div>用户信息：${JSON.stringify(user)}</div>`;
document.querySelector('.modal-body').innerHTML = content;

完整的正确示例 #

<!-- HTML结构 -->
<div class="modal fade" id="myModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">动态内容模态框</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <!-- 动态内容会插在这里 -->
      </div>
    </div>
  </div>
</div>

<button id="openModal" class="btn btn-primary">打开模态框</button>

// JS逻辑
document.getElementById('openModal').addEventListener('click', () => {
  // 用模板字面量生成动态内容
  const dynamicData = {
    title: '动态生成的项',
    description: '这是用模板字面量拼接的内容，完全没问题'
  };
  const modalContent = `
    <div class="card">
      <div class="card-body">
        <h6>${dynamicData.title}</h6>
        <p>${dynamicData.description}</p>
      </div>
    </div>
  `;
  
  // 插入内容到模态框
  const modalBody = document.querySelector('#myModal .modal-body');
  modalBody.innerHTML = modalContent;
  
  // 打开模态框
  const myModal = new bootstrap.Modal(document.getElementById('myModal'));
  myModal.show();
});

错误栈排查思路 #

如果你的错误栈指向Bootstrap内部的_getConfig、_showElement这类方法，大概率是这几个问题：

• 传给模态框的参数类型不对
• 调用API时this不是模态框实例
• 内容里有无法正确解析的DOM节点或对象

按上面的场景排查就能解决。

内容的提问来源于stack exchange，提问作者MATHEUS CAETANO ROCHA