最常卡住的是SDK加载时机和数据库规则：firebase.initializeApp()报错因SDK未加载完，需用defer确保顺序加载；写入失败多因规则未设为测试模式或路径不匹配；监听失效常因databaseURL漏掉-default-rtdb后缀或规则未发布。
直接在 index.html 里集成 Firebase 实时数据库，最常卡住的地方不是写法，而是「SDK 加载时机」和「数据库规则」这两处——90% 的“数据不写入”“读不到值”问题都出在这儿。
firebase.initializeApp() 报错 ReferenceError: firebase is not defined
这是最典型的加载失败现象。根本原因不是代码写错了，而是浏览器还没把 Firebase SDK 脚本下载执行完，你就调用了 firebase.initializeApp()。
- 必须确保
firebase-app-compat.js和firebase-database-compat.js已通过 CDN 正确引入，且顺序不能颠倒（app必须在database前） - 不要把初始化代码写在
<script>标签顶部或<head>里；推荐放在<body>底部，或用defer属性：
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js" defer></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-database-compat.js" defer></script>
<script>
const firebaseConfig = {
apiKey: "xxx",
authDomain: "xxx.firebaseapp.com",
databaseURL: "https://xxx-default-rtdb.firebaseio.com",
projectId: "xxx",
storageBucket: "xxx.appspot.com",
messagingSenderId: "xxx",
appId: "xxx"
};
firebase.initializeApp(firebaseConfig); // 这行现在能安全执行了
</script>
如果仍报错，请打开浏览器开发者工具的 Network 面板，确认两个 .js 文件状态码是 200，且没有被国内网络拦截（gstatic.com 在部分网络环境下不可达）。
database.ref().set() 成功但控制台看不到数据
写入操作返回 Promise 并 resolve，不代表数据真进了数据库——大概率是实时数据库的安全规则拒绝了写入。
立即学习“前端免费学习笔记（深入）”；
- 进 Firebase 控制台 → 实时数据库 → 规则（Rules）标签页，临时改成测试模式（不推荐长期使用，但调试必须）：
{
"rules": {
".read": true,
".write": true
}
}
注意：这个规则只对 https://xxx-default-rtdb.firebaseio.com/ 根路径生效；如果你写的是 database.ref('users/123').set(...)，而规则里没放开 users 路径，照样被拒。
- 规则编辑后必须点击「发布」才生效，很多人改完忘了点
- 规则语法区分大小写：
".read"不是"read"，少个点就无效
on("value") 监听不到数据变化
监听失效通常不是 JS 逻辑问题，而是路径、权限或初始化时机出了偏差。
- 确保监听路径与写入路径完全一致，包括末尾斜杠（
ref('users')≠ref('users/')） - 监听代码必须在
firebase.initializeApp()之后执行，且不能包裹在未触发的事件回调里（比如等某个按钮点击才监听，但你忘了点） - 检查浏览器控制台是否有
PERMISSION_DENIED错误 —— 这说明规则没给读权限，哪怕你刚设过".read": true，也可能是缓存或拼写错误 - 首次监听会触发一次完整快照，后续变更才触发增量更新；别误以为“第一次没回调”就是失败
简单验证监听是否工作：
const db = firebase.database();
db.ref('test').on('value', (snapshot) => {
console.log('当前值:', snapshot.val());
});
// 然后手动在控制台执行：db.ref('test').set({ now: Date.now() })
databaseURL 必须带 -default-rtdb 后缀
这是国内开发者最容易忽略的配置细节。Firebase 控制台生成的 databaseURL 默认长这样：
https://<your-project-id>-default-rtdb.firebaseio.com
但很多人复制时只截取到 https://<your-project-id>.firebaseio.com，漏掉 -default-rtdb 和协议后缀，导致所有读写请求 404。
- 务必去 Firebase 控制台 → 实时数据库 → 概览页，从「数据库 URL」字段原样复制，不要手敲或脑补
- 该 URL 必须以
https://开头，且结尾是.firebaseio.com（旧项目）或.firebaseio.com/.firebasedatabase.app（新项目），但国内环境目前仍以.firebaseio.com为主 - 如果项目创建于 2023 年后，Firebase 默认启用 Firestore，实时数据库需手动创建并选区域，此时 URL 中的
-default-rtdb是强制存在的，删掉就彻底连不上
真正麻烦的从来不是 API 怎么调，而是配置项里一个连字符、一个斜杠、一次没点「发布」，就能让整个流程静默失败。调试时优先盯死这三处：CDN 是否加载成功、databaseURL 是否完整、Rules 是否已发布且路径匹配。
