如何用JavaScript从Firebase实时数据库获取用户名到HTML表格及解决函数未定义报错

错误原因 #

• gety函数定义在AddItem内部，属于局部作用域，全局环境无法访问，而内联onclick会在全局作用域执行函数，导致找不到该函数。
• 错误使用Firebase 9+的API：db.ref是旧版命名空间写法，不符合模块化API规范。
• 逻辑错误：尝试通过document.getElementById(name).value获取值，但不存在对应id的DOM元素。

修复方案 #

1. 用事件监听器替代内联onclick，利用闭包保留当前行的用户名，避免局部函数无法访问的问题。
2. 改用Firebase 9+模块化API语法。
3. 直接使用AddItem函数传入的name参数，无需通过DOM查找。

修改后的核心代码 #

替换原AddItem函数部分代码：

function AddItem(name, email, registration, status) {
  let trow = document.createElement("tr");
  let td1 = document.createElement("td");
  let td2 = document.createElement("td");
  let td3 = document.createElement("td");
  let td4 = document.createElement("td");
  let td5 = document.createElement("td");
  let td6 = document.createElement("td");
  let td7 = document.createElement("td");
  let td8 = document.createElement("td");
  let td9 = document.createElement("td");

  td1.innerHTML = ++std;
  td2.innerHTML = name;
  td3.innerHTML = email;
  td4.innerHTML = registration;
  td5.innerHTML = status;

  // 利用闭包保留当前行的用户名
  function gety() {
    // 使用Firebase 9+模块化API语法
    const userRef = ref(db, `users/${name}`);
    onValue(userRef, (snapshot) => {
      const data = snapshot.val();
      if (data) {
        alert(data.name);
      } else {
        alert("未找到该用户数据");
      }
    });
  }

  td6.innerHTML = "<a href='viewID.html'><button type='button' name='button' class='viewIDbtn'>View ID</button></a>";
  
  // 重构td7元素，修复嵌套td的结构错误，并添加事件监听器
  const viewLink = document.createElement('a');
  viewLink.href = '#viewDriversAcct.html';
  viewLink.id = 'view';
  const viewImg = document.createElement('img');
  viewImg.src = 'images/view.png';
  viewImg.id = 'acct_logo';
  viewLink.appendChild(viewImg);
  // 绑定点击事件
  viewLink.addEventListener('click', gety);
  const td7Content = document.createElement('center');
  td7Content.appendChild(viewLink);
  td7.appendChild(td7Content);

  td8.innerHTML = "<center> <a href='editCommutersAcct.html'><img src='images/update.png' id='update'></a></center>";
  td9.innerHTML = "<td colspan='2' class='actionbtn'> <a href='#activate_action'><img src='images/checkAction.png' id='active_actionbtns'></a><a href='#deactivate_action'><img src='images/Xaction.png' id='actionbtns'></a></td>";

  trow.appendChild(td1);
  trow.appendChild(td2);
  trow.appendChild(td3);
  trow.appendChild(td4);
  trow.appendChild(td5);
  trow.appendChild(td6);
  trow.appendChild(td7);
  trow.appendChild(td8);
  trow.appendChild(td9);

  tbody.appendChild(trow);
}

额外说明 #

• 原代码中td7嵌套了多余的<td>标签，会破坏表格结构，已修复。
• 如果Firebase用户节点的标识不是用户名（而是UID等其他值），需要将用户标识作为参数传入AddItem函数，再替换ref(db, users/${name})中的name为对应标识。

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