JavaScript中参数i未传递引发Uncaught TypeError错误的解决求助

让我们一步步拆解并修复你的问题：

1. 先修复致命的语法错误 #

你在循环拼接ePage时，直接写了裸的HTML代码，没有用模板字符串反引号包裹，这会导致JavaScript解析错误，直接中断代码执行——这大概率是你觉得参数i没成功传递的核心原因。

错误代码片段：

ePage += <details open>
  <summary>Trivia</summary>
  <ul>${triviaSplit(i)}</ul>
</details>

修复后：

ePage += `<details open>
  <summary>Trivia</summary>
  <ul>${triviaSplit(i)}</ul>
</details>`;

2. 处理trivia不存在的边界情况 #

错误提示说明data[a].trivia是undefined，可能的原因有两个：

• data数组中某个索引a对应的元素不存在（比如循环超出了数组实际长度）
• 该元素确实没有trivia属性，或者trivia不是数组

我们需要在triviaSplit函数里先做安全判断，避免直接访问undefined的length属性：

function triviaSplit(a, data) { // 把data作为参数传入，避免依赖全局变量引发的作用域问题
  let trSplit = '';
  // 先检查data[a]和data[a].trivia是否存在，且是数组
  const trivia = data[a]?.trivia;
  if (Array.isArray(trivia)) {
    for (let b = 0; b < trivia.length; b++){
      trSplit += ` <li>${trivia[b]}</li> `;
    };
  }
  return trSplit;
};

调用函数时记得传入data：

<ul>${triviaSplit(i, data)}</ul>

3. 可选优化：用数组方法简化循环 #

你可以用Array.map替代传统for循环，让代码更简洁易读：

function triviaSplit(a, data) {
  const trivia = data[a]?.trivia;
  if (!Array.isArray(trivia)) return '';
  return trivia.map(item => ` <li>${item}</li> `).join('');
};

完整修复后的代码 #

let jsonLength = data.length;
let ePage = '';

function triviaSplit(a, data) {
  const trivia = data[a]?.trivia;
  if (!Array.isArray(trivia)) return '';
  return trivia.map(item => ` <li>${item}</li> `).join('');
};

for (let i = 0; i < jsonLength; i++) {
  ePage += `<details open>
    <summary>Trivia</summary>
    <ul>${triviaSplit(i, data)}</ul>
  </details>`;
}

这样修改后，既解决了语法错误导致的参数传递异常，也处理了trivia不存在的边界情况，代码整体更健壮。

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