React Native集成Firebase Realtime DB写入失败求助

我在 React Native 应用中配置 Firebase Realtime DB 后，写入操作始终不生效，数据库控制台显示为空。已经完成以下操作：

• 在 Firebase 控制台创建项目
• 添加 Web 应用
• 确认数据库权限允许读写
• 复制配置文件到项目中
• 通过 npm 安装 Firebase 依赖

以下是项目相关配置与代码：

package.json 配置 #

{
  "name": "VizboMobile",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "@rneui/base": "^4.0.0-rc.7",
    "@rneui/themed": "^4.0.0-rc.8",
    "express": "^4.18.2",
    "firebase": "^10.7.1",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-safe-area-context": "^4.7.4",
    "react-native-screens": "^3.27.0",
    "react-native-vector-icons": "^10.0.2",
    "react-navigation": "^5.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.11",
    "@tsconfig/react-native": "^3.0.0",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.8",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "engines": {
    "node": ">=16"
  }
}

firebaseConfig.tsx 配置 #

const firebaseConfig = {
    apiKey: "aaaaaaaaaa",
    authDomain: "bbbbbbbbbb",
    databaseURL: "cccccccccc",
    projectId: "dddddddddd",
    storageBucket: "eeeeeeeeeee",
    messagingSenderId: "ffffffff",
    appId: "gggggggggg",
    measurementId: "hhhhhhhhhhh"
};

const app3 = initializeApp(firebaseConfig)

export {app3};

写入逻辑代码 #

import { getDatabase } from 'firebase/database';
import {set,ref} from 'firebase/database'
const db = getDatabase(app3)

function writeUserData(userId, name, email) {
  set(ref(db, 'users/' + userId), {
  username: name,
  email: email

});
}

触发写入的按钮代码 #

function TestFirebaseScreen({navigation}: any) {
  function writeUserData(userId: string, name: string, email: string) {
    
    set(ref(db, 'users/' + userId), {
      username: name,
      email: email,
    }).then(() => console.log("success"))

  }

    return (
      <SafeAreaView>            
        <Button  
          title = "test"
          onPress={() => writeUserData("abc", "a", "b")}
        />
      </SafeAreaView>
    );
}

export default TestFirebaseScreen

问题排查方向 #

1. Firebase 初始化缺失导入：检查 firebaseConfig.tsx 是否导入 initializeApp，缺少 import { initializeApp } from 'firebase/app'; 会导致应用初始化失败，后续数据库操作无效。
2. 添加错误捕获：当前代码仅打印成功日志，添加 catch 块捕获错误，能直接定位问题：

   set(ref(db, 'users/' + userId), {
     username: name,
     email: email,
   }).then(() => console.log("success"))
   .catch((error) => console.error("写入失败：", error));
   

3. 验证 databaseURL 正确性：确保 firebaseConfig 中的 databaseURL 格式为 https://<project-id>.firebaseio.com/，地址错误会导致请求无法到达数据库。
4. 数据库规则实时性：确认规则已生效，测试阶段可临时设置为开放规则：

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

5. 避免重复定义函数：组件内重新定义了 writeUserData，建议复用外部导出的函数，确保数据库引用是单例实例。
6. React Native 网络权限：Android 9+ 需确保允许 HTTPS 请求，iOS 需在 Info.plist 中配置网络权限。

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