React Native集成Firebase调用database方法报TypeError错误如何解决

触发报错的核心原因 #

• 导出导入语法不匹配：FIREBASE.js 中使用的是默认导出 export default FIREBASE，但 TambahKontak.js 里用了命名导入的写法 import { FIREBASE } from '../../config/FIREBASE'，导致导入的 FIREBASE 本身就是 undefined，调用方法自然抛出错误。
• Firebase 版本 API 不兼容：你当前使用的是 v9 及以上的模块化 Firebase SDK，旧版的 FIREBASE.database() 写法已经废弃，需要单独导入 Realtime Database 相关的模块化方法才能调用。

具体修复步骤 #

1. 修正导入语法 #

修改 TambahKontak.js 中的导入语句，去掉命名导入的大括号，使用默认导入：

// 错误写法
// import { FIREBASE } from '../../config/FIREBASE'
// 修正后写法
import FIREBASE from '../../config/FIREBASE'

2. 补充 Realtime Database 相关配置 #

先安装 Realtime Database 依赖：
npm install firebase/database

修改 FIREBASE.js 代码，导入并导出数据库实例：

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// 新增导入 Realtime Database 方法
import { getDatabase } from "firebase/database";

// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: "AIzaSyAd2EBoYYCRWEc3oClZTV3Wo-TiQkM2MgQ",
    authDomain: "crud-react-26836.firebaseapp.com",
    databaseURL: "https://crud-react-26836-default-rtdb.asia-southeast1.firebasedatabase.app",
    projectId: "crud-react-26836",
    storageBucket: "crud-react-26836.appspot.com",
    messagingSenderId: "741718079918",
    appId: "1:741718079918:web:1566301b46c4448c8c703f"
};

// Initialize Firebase
const FIREBASE = initializeApp(firebaseBASE);
// 导出数据库实例
export const db = getDatabase(FIREBASE);
export default FIREBASE;

3. 修正数据库操作写法 #

修改 TambahKontak.js 中的数据库调用逻辑，使用模块化 API 操作数据：

import React, { Component } from 'react'
import { StyleSheet, View, TouchableOpacity, Text, Alert } from 'react-native'
import { InputData } from '../../component'
// 导入数据库实例和需要用到的操作方法
import FIREBASE, { db } from '../../config/FIREBASE'
import { ref, push, set } from "firebase/database";

onSubmit = () => {
    if (this.state.nama && this.state.nomorHP && this.state.alamat) {
        console.log("Masuk Submit");
        console.log(this.state);
        // 替换原有写法，生成集合引用
        const kontakReferensi = ref(db, 'kontak');
        // 新增数据示例
        const newKontakRef = push(kontakReferensi);
        set(newKontakRef, {
            nama: this.state.nama,
            nomorHP: this.state.nomorHP,
            alamat: this.state.alamat
        })
    }
}

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