Firebase数据对象访问问题：动态运动选择按钮异常排查

首先，你碰到的核心问题确实是对象属性访问方式的问题：当属性名是字符串变量时，不能用点语法（userData.sport），必须用方括号语法（userData[sport]）。点语法只能用来访问已知的固定属性名，而方括号可以动态传入字符串变量，精准定位到对应的属性。

问题拆解 #

你代码里的console.log("userData." + sport + " = " + userData.sport)会一直输出undefined，因为JavaScript会把userData.sport当成访问一个名为sport的固定属性，而不是你循环里sports[i]对应的字符串值，自然取不到正确数据。

另外还有个小bug：你用sports.splice(i, (i+1))是错误的，splice的第二个参数是要删除的元素数量，这里应该写1，不然会从索引i开始删除i+1个元素，导致数组被错误截断。

修改后的完整代码 #

function getNewSports(uid) {
    console.log("uid = " + uid);
    var sports = ["Spikeball", "Soccer", "Basketball", "Indoor", "Tennis", "Golf", "Frisbee", "Handball"];
    userRef = firebase.database().ref().child("Users").child(uid).child("Sports");
    
    userRef.once('value').then(function(snapshot) {
        var userData = snapshot.val();
        
        // 过滤已存在的运动项目，用filter更简洁，避免索引混乱
        const remainingSports = sports.filter(sport => {
            // 用方括号访问动态属性
            const exists = userData?.[sport] != null; // 可选链操作符避免空值报错
            if (exists) {
                console.log(`removing ${sport} because userData.${sport} = ${userData[sport]}`);
            }
            return !exists;
        });

        // 生成按钮
        remainingSports.forEach(sport => {
            var newItem = document.createElement("BUTTON");
            var t = document.createTextNode(sport);
            newItem.appendChild(t);
            newItem.id = sport;
            newItem.setAttribute("class", "btn btn-secondary sportItem");
            newItem.setAttribute("onclick", `addSport('${sport}')`); // 给字符串加引号更安全
            document.getElementById("sports-pop-up").appendChild(newItem);
        });

        console.log(remainingSports);
    });
}

关键修改说明 #

1. 动态属性访问：把userData.sport改成userData[sport]，这样就能通过字符串变量正确访问Firebase返回对象的对应属性。
2. 数组过滤优化：用Array.filter()替代原有的for循环+splice，代码更简洁，也避免了手动维护索引（原代码里i--容易出错）。
3. 空值安全处理：加入可选链操作符?.，避免当userData为null时出现Cannot read properties of null的报错。
4. 按钮点击事件优化：把addSport(this.id)改成addSport('${sport}')，直接传入字符串值，避免潜在的引号转义问题。

额外小建议 #

可以先判断用户是否已有Sports数据，处理更严谨：

if (!snapshot.exists()) {
    // 用户还没有运动数据，直接用原数组生成按钮
    remainingSports = [...sports];
}

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