React Native集成Firebase后无法访问Firestore文档数据以展示

问题描述 #

我开发了一个React Native应用，正在集成Google Firebase。目前已完成Firestore数据库配置并关联应用，执行查询能获取到文档，但无法正确提取数据用于界面展示。需求是：获取已登录用户ID（此功能正常），遍历UserFavorites集合中的每个文档，提取文档内的userId字段与当前用户ID对比，一致则将该文档数据存入状态数组，最终展示给用户。

现有代码 #

useEffect(() => {
    if(auth.currentUser === null){
      navigation.navigate('LoginStack')
    }
    const collectionRef = collection(db, 'UserFavorites')
    getDocs(collectionRef)
      .then((snapshot) => {
        let properties = []
        snapshot.docs.forEach((doc) => {
          console.log(auth.currentUser.uid)
          console.log(doc.data())
        })
      })
      .catch((error) => {
        console.error(error)
      })
  }, [])

当前控制台输出 #

j4aeXJORvINA8m2bYpNGMcaUm9T2
Object {
  "address": "966 Palisades Beach Rd, Santa Monica, CA 90403",
  "bathrooms": 8,
  "bedrooms": 5,
  "contingentListingType": "FHA",
  "country": "USA",
  "currency": "USD",
  "dateSold": Object {
    "nanoseconds": 842000000,
    "seconds": 1658695140,
  },
  "daysOnZillow": 1,
  "hasImage": true,
  "imgSrc": "https://photos.zillowstatic.com/fp/64da6094eae05eba27184401e006ee69-p_e.jpg",
  "latitude": 34.01869,
  "listingStatus": "FOR_SALE",
  "livingArea": 7043,
  "longitude": -118.50533,
  "lotAreaUnit": "sqft",
  "lotAreaValue": 5466.78,
  "price": 25000000,
  "propertyType": "SINGLE_FAMILY",
  "userId": "j4aeXJORvINA8m2bYpNGMcaUm9T2",
  "zpid": "20485843",
}

解决步骤 #

1. 单独输出文档中的userId字段 #

要直接打印userId，只需访问doc.data()返回对象的userId属性：

console.log(doc.data().userId)

2. 筛选当前用户数据并更新状态 #

首先用useState定义存储收藏数据的状态：

const [userFavorites, setUserFavorites] = useState([]);

然后在查询回调中过滤匹配当前用户ID的文档，更新状态：

useEffect(() => {
    if(!auth.currentUser){
      navigation.navigate('LoginStack')
      return; // 提前退出，避免后续无意义操作
    }
    const currentUserId = auth.currentUser.uid;
    const collectionRef = collection(db, 'UserFavorites')
    getDocs(collectionRef)
      .then((snapshot) => {
        // 转换文档数据并筛选当前用户的收藏
        const filteredFavorites = snapshot.docs
          .map(doc => ({ ...doc.data(), id: doc.id })) // 保留文档ID，方便后续操作
          .filter(item => item.userId === currentUserId);
        setUserFavorites(filteredFavorites);
      })
      .catch((error) => {
        console.error(error)
      })
  }, [auth.currentUser, navigation])

3. 优化查询（推荐） #

直接遍历整个集合效率较低，建议在查询阶段就用where条件过滤，减少数据传输：

useEffect(() => {
    if(!auth.currentUser){
      navigation.navigate('LoginStack')
      return;
    }
    const currentUserId = auth.currentUser.uid;
    const collectionRef = collection(db, 'UserFavorites');
    // 添加where条件直接筛选当前用户的数据
    const queryRef = query(collectionRef, where('userId', '==', currentUserId));
    getDocs(queryRef)
      .then((snapshot) => {
        const favorites = snapshot.docs.map(doc => ({ ...doc.data(), id: doc.id }));
        setUserFavorites(favorites);
      })
      .catch((error) => {
        console.error(error)
      })
  }, [auth.currentUser, navigation])

4. 界面展示数据 #

用FlatList渲染状态中的收藏数据：

<FlatList
  data={userFavorites}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    <View style={{ padding: 16, borderBottomWidth: 1, borderBottomColor: '#eee' }}>
      <Text style={{ fontSize: 16, fontWeight: 'bold' }}>{item.address}</Text>
      <Text style={{ marginTop: 8 }}>${item.price.toLocaleString()}</Text>
      <Image 
        source={{ uri: item.imgSrc }} 
        style={{ width: 200, height: 150, marginTop: 8, borderRadius: 8 }} 
        resizeMode="cover"
      />
    </View>
  )}
/>

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