Firebase实时数据库回调返回函数而非数据，React Native显示异常求助

首先得帮你理清关键问题：Firebase实时数据库的on('value')方法不会直接返回回调里的数据——它的返回值其实是一个用来取消监听的函数，这就是你把它赋值给taskTitle后，得到的是函数而非数据的原因。另外，回调函数是异步执行的，组件初始化时render已经执行完毕，数据回来后也不会自动触发UI更新，因为你没有用React的状态管理来驱动视图。

下面是针对你的代码的修正方案，一步步来：

步骤1：使用React State存储数据 #

把任务标题放到组件的state里，这样数据变化时React会自动触发重渲染，更新UI。

步骤2：在生命周期钩子中添加/移除监听 #

• 在componentDidMount里添加Firebase监听，确保组件挂载后再请求数据；
• 在componentWillUnmount里调用on()返回的取消函数，避免组件卸载后还存在监听导致内存泄漏。

修正后的完整代码 #

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { database } from '@react-native-firebase/database'; // 确保你正确导入了Firebase

class TasksScreen extends Component {
  state = {
    taskTitle: '' // 初始化状态为空字符串
  };

  componentDidMount() {
    // 保存取消监听的函数，方便后续卸载组件时调用
    this.unsubscribe = database()
      .ref('Tasks')
      .child('D8oTrGVFNOT2Gcb7Odwf3SbbVZu2')
      .child('-LrXGvE7IBv930CX4npb')
      .child('title')
      .on('value', (data) => {
        const title = data.val();
        console.log(title);
        // 用setState更新状态，触发组件重渲染
        this.setState({ taskTitle: title });
      });
  }

  componentWillUnmount() {
    // 组件卸载时取消监听
    if (this.unsubscribe) {
      this.unsubscribe();
    }
  }

  render() {
    // 从state中获取最新的任务标题
    const { taskTitle } = this.state;
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>{taskTitle}</Text>
      </View>
    );
  }
}

export default TasksScreen;

为什么这样改？ #

• 状态管理：用setState更新数据，React会感知到状态变化并重新渲染组件，这样UI就能同步显示最新的数据库数据；
• 生命周期控制：在componentDidMount里初始化监听，符合React组件的生命周期规范，避免不必要的重复监听；
• 内存泄漏防护：在componentWillUnmount里移除监听，防止组件销毁后还保持对数据库的连接，造成资源浪费。

这样修改后，你就能在屏幕上正确显示从Firebase获取到的任务标题了，而且数据更新时UI会自动同步~

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