Firebase新版SDK配置后如何正确创建Realtime Database数据引用？

核心差异说明 #

Firebase 9及以上版本改用函数式模块化API，废弃了旧版的命名空间链式调用写法，所有功能都需要单独导入对应工具函数实现。

现有代码问题梳理 #

你当前代码的核心错误有3个：

• realtime database的导入路径错误，CDN引入需要用和其他模块同版本的gstatic地址
• 错误导入不存在的datab方法，正确的初始化方法是getDatabase
• 缺少创建引用的ref函数、读取一次性数据的get函数导入
• HTML中引入JS的script标签未声明为module，无法执行import语法

完整可运行代码 #

1. HTML代码修正 #

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>I-Verbs</title>
</head>
<body>
<header>
    <h1>Practica de Irregular Verbs</h1>
</header>
<div>
    <button>Boton</button>
    <form>
        <input id="infinitive" type="text" name="infinitive">
        <input id="pasttense" type="text" name="past tense">
        <input id="participle" type="text" name="participle">
        <input id="meaning" type="text" name="meaning">       
    </form>
</div>
<!-- 这里修改type为module，支持ES模块导入语法 -->
<script type="module" src="logica.js"></script>

</body>
</html>

2. JS（logica.js）代码修正 #

// 导入所需函数，所有CDN版本统一为9.23.0稳定版，可自行替换为更高兼容版本
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-analytics.js";
// 导入realtime database相关函数：getDatabase初始化实例，ref创建引用，get读取一次性数据
import { getDatabase, ref, get } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-database.js";

// 替换为你自己的Firebase配置
const firebaseConfig = {
  // ... 你的配置内容
};

// 初始化Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
// 初始化数据库实例，对应旧版 firebase.database()
const db = getDatabase(app);

// 创建数据引用，对应旧版 db.ref('Irregular Verbs/arise')
// 第一个参数为数据库实例，第二个参数为数据路径
const r1 = ref(db, 'Irregular Verbs/arise');

// 读取数据并填充表单，对应旧版 r1.once('value')
get(r1).then((snapshot) => {
  if (snapshot.exists()) {
    const verbData = snapshot.val();
    // 按你存储的字段结构填充对应输入框
    document.getElementById('infinitive').value = verbData.infinitive || '';
    document.getElementById('pasttense').value = verbData.pasttense || '';
    document.getElementById('participle').value = verbData.participle || '';
    document.getElementById('meaning').value = verbData.meaning || '';
  } else {
    alert("对应路径无数据");
  }
}).catch(err => {
  console.error("读取失败：", err);
});

新旧写法对应表 #

内容的提问来源于stack exchange，提问作者miguel angel Asencio