React Native从Firestore数据库获取数据无输出问题求助

你的代码存在几个关键问题，导致无法正常获取Firestore数据，逐个修正如下：

1. 文档数据调用错误 #

doc.data 是Firestore文档的方法，必须调用 doc.data() 才能拿到实际数据，否则你获取的是函数引用而非文档内容。

2. 循环中重复覆盖状态 #

在forEach循环里每次调用setState，会持续覆盖之前的items值，最终只会保留最后一条文档的数据。正确做法是先将所有文档数据收集到数组中，再一次性更新状态。

3. 不必要的JSON序列化 #

把数据转成字符串JSON.stringify(items)完全多余，直接保存对象/数组即可，后续渲染时可遍历展示具体字段。

4. 过时的Firestore配置 #

timestampsInSnapshots 在新版本Firebase中已默认启用，无需手动设置。

5. 无效组件导入 #

Frame 不是React Native的内置组件，需从导入列表中移除。

6. 缺失错误捕获逻辑 #

未添加catch块，无法排查请求是否失败，建议补充以方便调试。

修正后的完整代码 #

import React, { Component } from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import firebase from "firebase"

export default class HomeScreen extends Component {
  constructor(){
    super()
    this.state={
      items: [],
      isLoading: true
    }
  }

  getItems(){
    const db = firebase.firestore()
    db.collection('dishes').get()
      .then((snapshot)=>{
        // 收集所有文档数据，可选保存文档ID
        const itemsList = snapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }))
        this.setState({ 
          items: itemsList,
          isLoading: false
        })
      })
      .catch(error => {
        console.error('获取数据失败:', error)
        this.setState({ isLoading: false })
      })
  }

  componentDidMount() {
    this.getItems()
  }

  render() {
    const { items, isLoading } = this.state
    if (isLoading) {
      return <Text>Loading...</Text>
    }

    // 遍历展示物品，可根据实际字段调整内容
    return (
      <View style={styles.container}>
        {items.length === 0 ? (
          <Text>暂无物品数据</Text>
        ) : (
          items.map(item => (
            <View key={item.id} style={styles.itemCard}>
              <Text style={styles.itemName}>{item.name}</Text>
              {/* 可添加更多字段展示 */}
            </View>
          ))
        )}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16
  },
  itemCard: {
    padding: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    marginBottom: 8
  },
  itemName: {
    fontSize: 16,
    fontWeight: '500'
  }
})

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