尝试更新Firebase Realtime Database时报错无法写入数据问题求助

错误根因 #

报错原因非常明确：

Uncaught Error: update failed: values argument contains an invalid key ([object HTMLInputElement]) in path /user-Projects/[object HTMLInputElement]/-Mne7bupWgxUwAS-GtVh. Keys must be non-empty strings and can't contain ".", "#", "$", "/", "[", or "]"

代码中你定义的user、project变量直接获取的是HTML输入框DOM元素对象，而不是用户输入的文本值：

const user = document.getElementById('userName'); // 拿到的是<input>元素对象，不是输入值
const project = document.getElementById('projectName');

后续你拼接数据库路径、存储项目数据时直接使用了这些DOM对象，JS会自动把对象转成字符串[object HTMLInputElement]，这个字符串包含了Firebase禁止作为key的[、]字符，因此触发了校验报错。

修复方案 #

修改代码如下即可解决问题：

1. 在点击事件内部获取输入框的最新值，同时增加非空校验避免无效提交
2. 替换所有用到DOM元素对象的位置为输入值字符串

完整修复后的核心代码：

const addBtn = document.getElementById('addBtn');
const db = firebase.database();

addBtn.addEventListener('click', (e) => {
    e.preventDefault();
    // 获取输入框的文本值，trim去除首尾空格
    const userName = document.getElementById('userName').value.trim();
    const projectName = document.getElementById('projectName').value.trim();
    
    // 非空校验，避免提交空值
    if (!userName || !projectName) {
        alert('用户名和项目名不能为空');
        return;
    }

    // 构造项目数据
    var projectData = {
        owner: userName,
        uid: userName,
        title: projectName    
    };

    // 生成新项目key
    var newProjectKey = db.ref().child('Projects').push().key;
    var updates = {};
    updates['/Projects/' + newProjectKey] = projectData;
    // 路径拼接使用输入值字符串，不再用DOM对象
    updates['/user-Projects/' + userName + '/' + newProjectKey] = projectData;

    db.ref().update(updates);
});

补充优化建议 #

如果你的项目使用了Firebase Auth做用户登录，建议uid字段和用户路径使用Auth返回的用户唯一ID，不要用用户输入的用户名，避免重名导致数据冲突。

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