Firebase实时数据库：addEventListener中set字段不生效问题已解决

最近用Firebase搭建简易Web应用时踩了个奇怪的坑：把数据库写入的set代码放在按钮点击事件的回调里，能正常触发alert但数据死活写不进数据库；但把完全相同的代码挪到全局作用域，数据就能成功写入。折腾半天后，发现只要在全局加一行const dbRef = ref(db);就解决了问题。

不生效的代码（点击事件回调内） #

import { initializeApp } from 'firebase/app';
import { getDatabase, ref, set } from 'firebase/database';

const firebaseConfig = {
    // 我的Firebase配置
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getDatabase(firebaseApp);

// 注释掉这行时，点击事件内的set无法写入
// const dbRef = ref(db);

document.getElementById("addBtn").addEventListener("click", function() {
    alert("test");
    let field1 = "10";
    let field2 = "10";
    let date = "2023-04-10";

    set(ref(db, 'score/' + date), {
        "field_1": field1,
        "field_2": field2
    });
    
});

生效的代码（全局作用域） #

import { initializeApp } from 'firebase/app';
import { getDatabase, ref, set } from 'firebase/database';

const firebaseConfig = {
    // 我的Firebase配置
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getDatabase(firebaseApp);

let field1 = "10";
let field2 = "10";
let date = "2023-04-10";

set(ref(db, 'score/' + date), {
    "field_1": field1,
    "field_2": field2
});

解决方法 #

在全局作用域添加一行数据库根引用的初始化代码即可：

const dbRef = ref(db);

可能的原因分析 #

这大概率是Firebase实时数据库的模块初始化时机问题：全局作用域的set调用会提前触发数据库连接的初始化流程，而点击事件里的set是延迟触发的，此时可能因为模块未完成初始化导致连接失败。提前创建根引用dbRef会强制触发数据库连接的初始化，确保后续点击事件中的set调用能正常访问数据库。

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