React项目无法向Firebase实时数据库保存数据求助

我是React新手，项目集成了Google登录，用户能正常完成登录流程，但无法将用户UID写入Firebase实时数据库，而且Signin.jsx中写的保存相关控制台日志完全没输出。

相关代码 #

Signin.jsx 关键片段 #

import { signInWithPopup, GoogleAuthProvider } from "firebase/auth";
import { auth, db } from "../firebase-config";
import { ref, set } from "firebase/database";

const handleGoogleSignIn = async () => {
  const provider = new GoogleAuthProvider();
  try {
    const result = await signInWithPopup(auth, provider);
    const user = result.user;
    console.log("登录成功，用户信息：", user); // 这个日志能正常输出
    // 以下代码的日志完全未出现
    console.log("准备写入UID到数据库：", user.uid);
    await set(ref(db, `users/${user.uid}`), {
      uid: user.uid,
      email: user.email,
      displayName: user.displayName
    });
    console.log("UID写入成功");
  } catch (error) {
    console.error("登录或写入失败：", error); // 此处也未输出错误日志
  }
};

Firebase配置文件（firebase-config.js） #

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

const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  databaseURL: "你的实时数据库URL",
  projectId: "你的项目ID",
  storageBucket: "你的存储桶",
  messagingSenderId: "你的SenderID",
  appId: "你的APP_ID"
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getDatabase(app);

Firebase实时数据库规则 #

{
  "rules": {
    ".read": false,
    ".write": false,
    "users": {
      "$uid": {
        ".read": "$uid === auth.uid",
        ".write": "$uid === auth.uid"
      }
    }
  }
}

控制台日志 #

仅输出：登录成功，用户信息：[User对象]
无"准备写入UID到数据库"、"UID写入成功"的日志，也未捕获到任何错误日志

排查&解决建议 #

1. 确认代码是否执行到写入逻辑分支

   • 打印完整用户对象：把console.log("登录成功...")改成console.log("用户完整信息：", JSON.stringify(user))，确认uid字段存在且有效
   • 检查try块内是否有未注意到的return语句，导致提前跳出代码块

2. 检查Firebase数据库初始化正确性

   • 确认databaseURL是实时数据库的正确地址（格式为https://xxx-default-rtdb.firebaseio.com/，不要混淆为Firestore地址）
   • 核对Signin.jsx中db的导入路径和拼写，确保没有错误

3. 临时测试数据库规则权限
   暂时放宽规则，验证是否是权限问题：

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

   如果放宽规则后能写入，说明原规则逻辑没问题，但要确认登录后的auth状态是否正常传递；如果仍无法写入，问题则不在规则上

4. 检查异步操作调用方式

   • 确认按钮点击事件绑定正确：使用onClick={() => handleGoogleSignIn()}，避免直接绑定函数导致的上下文问题
   • 查看Firebase实时数据库后台，确认是否存在静默写入（日志未输出但数据已写入）

5. 查看Firebase后台日志
   进入Firebase控制台的实时数据库「规则」页面，检查是否有访问拒绝日志；同时在「认证」页面确认用户账号已成功创建

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