无法使用this.state.data.map()在react本机firebase中显示获取的数据

import React, { Component } from 'react';
import firebase from 'firebase';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  componentDidMount() {
    // 获取Firebase数据
    firebase.database().ref().once('value')
      .then(snapshot => {
        // 将数据存储在组件状态中
        const data = snapshot.val();
        this.setState({ data });
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    const { data } = this.state;

    return (
      <div>
        {data.map(item => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>
    );
  }
}

export default MyComponent;