Next.js v14 连接Firebase实时数据库失败，控制台无报错求助

1. 检查Firebase初始化完整性 #

确认firebaseConfig.js中完成了实时数据库的完整初始化，示例代码如下：

import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";

const firebaseConfig = {
  apiKey: "你的apiKey",
  authDomain: "你的authDomain",
  databaseURL: "你的实时数据库完整URL（需以https://开头）",
  projectId: "你的projectId",
  storageBucket: "你的storageBucket",
  messagingSenderId: "你的messagingSenderId",
  appId: "你的appId"
};

// 初始化Firebase应用
const app = initializeApp(firebaseConfig);
// 获取实时数据库实例
const database = getDatabase(app);

export { database };

注意：databaseURL必须是Firebase控制台实时数据库页面显示的完整地址，不能遗漏协议或后缀。

2. 确认代码执行的环境与时机 #

Next.js App Router中，Firebase实时数据库操作必须在客户端组件中执行（SDK依赖浏览器环境）：

• 在组件顶部添加'use client'指令标记为客户端组件
• 为数据写入代码添加then/catch捕获潜在错误，避免静默失败

示例代码：

'use client'; // 必须添加，标记为客户端组件

import { ref, push, set } from "firebase/database";
import { database } from "./firebaseConfig";

export default function YourComponent(props) {
  const handleSubmit = () => {
    const usersRef = ref(database, 'users');
    const newDataRef = push(usersRef);
    set(newDataRef, {
      user: props.email,
      password: props.password
    })
    .then(() => {
      console.log("数据写入成功");
    })
    .catch((error) => {
      console.error("数据写入失败：", error);
    });
  };

  return <button onClick={handleSubmit}>提交数据</button>;
}

3. 验证实时数据库规则配置 #

即使使用测试模式，也要确认规则是否正确允许读写：
在Firebase控制台的实时数据库>规则页面，确保规则为：

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

若规则存在语法错误，会导致读写请求静默失败，需检查规则语法是否合规。

4. 排查网络请求状态 #

打开浏览器开发者工具>网络标签，过滤firebaseio.com相关请求：

• 若无请求：检查组件是否正常渲染、事件绑定是否生效
• 若有请求但返回4xx/5xx：查看响应内容，获取具体错误原因（如权限不足、URL错误）

5. 确认数据是否实际写入 #

有时数据已写入但未在控制台显示：

• 点击Firebase控制台实时数据库页面右上角的刷新按钮
• 检查代码中数据路径（如users）与控制台显示的路径是否完全一致

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