React Native中出现firebase.database is not a function错误的原因排查

问题1：未导入Firebase实时数据库模块 #

你的config配置文件仅导入了认证和Firestore模块，未导入实时数据库的兼容版本，导致firebase.database()方法不存在。

修改后的config文件代码 #

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
// 新增这行，导入实时数据库兼容模块
import 'firebase/compat/database';


const firebaseConfig = {
  apiKey: "AIzaSyBS93aTCkwMyEWU15HR5y454qZM_WTDXhAo",
  authDomain: "newawesome-18ee9.firebaseapp.com",
  projectId: "newawesome-18ee9",
  storageBucket: "newawesome-18ee9.appspot.com",
  messagingSenderId: "441185679151",
  appId: "1:441187374121:web:ecf6de832274a4480b8610",
  measurementId: "G-R6NM36814P"
};

if (!firebase.apps.length){
    firebase.initializeApp(firebaseConfig)
}
export {firebase};

问题2：组件代码中的数据处理错误 #

你直接将数据库引用赋值给users状态，FlatList无法渲染该类型数据；同时未清理监听，可能造成内存泄漏。

修改后的AboutApp组件代码 #

import React, { useState, useEffect } from 'react';
import {View, Text, FlatList, StyleSheet, Pressable} from 'react-native'
import {firebase} from '../config';


const AboutApp = ({ navigation }) =>{
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // 获取数据库引用
    const userRef = firebase.database().ref("first");
    // 监听数据变化
    const unsubscribe = userRef.on("value", datasnap => {
      const data = datasnap.val();
      // 将对象数据转为数组，适配FlatList
      if (data) {
        const userList = Object.values(data);
        setUsers(userList);
        console.log(userList);
      } else {
        setUsers([]);
      }
    });

    // 组件卸载时取消监听，避免内存泄漏
    return () => unsubscribe();
  }, [])


  return (
    <View style={{ flex:1, marginTop: 100}}>
      <FlatList
        style={{height: '100%'}}
        data={users}
        numColumns={1}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({item}) => (
          <Pressable style={styles.container}>
            <View style={styles.innerContainer}>
              <Text>{item.name}</Text>
              <Text>{item.email}</Text>
              <Text>{item.phone}</Text>
            </View>
          </Pressable>
        )}
      />
    </View>
  );
}

// 补充样式定义（原代码缺失）
const styles = StyleSheet.create({
  container: {
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee'
  },
  innerContainer: {
    gap: 5
  }
})

export default AboutApp; 

额外说明 #

• 确保Firebase控制台已启用实时数据库服务，开发阶段可暂时将数据库规则设为公开读写，上线后再调整为安全规则
• keyExtractor是FlatList必需属性，用于给每个列表项提供唯一标识

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