React-Query从Firebase获取数据时status显示成功但data返回undefined的问题求助

嘿，我一眼就发现问题啦！你的fetchstory函数虽然能在回调里打印出正确的stories，但整个函数没有返回Promise对象——而useQuery正是依赖异步函数返回的Promise来追踪请求状态、接收最终数据的，所以才会出现status显示成功，但data是undefined的情况。

问题拆解 #

你原来的fetchstory里，getDocs是异步操作，你在它的.then()回调里返回了stories，但这个返回值并没有被传递到函数外部。整个fetchstory函数默认返回了undefined，useQuery拿到这个undefined后，自然认为请求“完成”了，但没有数据可以给到data。

两种修复方式 #

方式1：用async/await（更易读） #

把函数改成异步函数，用await等待getDocs的结果，最后直接返回处理好的数组：

const fetchstory = async () => {
  const storyRef = collection(db, "Stories");
  const snapshot = await getDocs(storyRef);
  // 用map替代forEach，代码更简洁
  return snapshot.docs.map(doc => ({
    title: doc.data().title,
    id: doc.id,
  }));
};

方式2：直接返回Promise链 #

如果你习惯用.then()的写法，只要把getDocs的整个Promise链return出去就行：

const fetchstory = () => {
  const storyRef = collection(db, "Stories");
  // 关键：把这个Promise返回给useQuery
  return getDocs(storyRef).then((snapshot) => {
    let stories = [];
    snapshot.docs.forEach((doc) => {
      stories.push({
        title: doc.data().title,
        id: doc.id,
      });
    });
    console.log(stories);
    return stories;
  });
};

完整修复后的代码 #

我还加了加载状态的判断，避免数据未返回时FlatList因为data为undefined报错：

import { View, Text, FlatList } from "react-native";
import React from "react";
import { collection, getDocs } from "firebase/firestore";
import { db } from "../../lib/Firebase";
import { useQuery } from "react-query";

const fetchstory = async () => {
  const storyRef = collection(db, "Stories");
  const snapshot = await getDocs(storyRef);
  return snapshot.docs.map(doc => ({
    title: doc.data().title,
    id: doc.id,
  }));
};

const Header = () => {
  const { data, status } = useQuery("story", fetchstory);
  
  const renderList = ({ item }) => {
    return (
      <View>
        <Text>{item.title}</Text>
      </View>
    );
  };

  // 加载状态提示
  if (status === "loading") {
    return <View><Text>加载故事中...</Text></View>;
  }

  return (
    <View>
      <Text>Header</Text>
      <Text>请求状态：{status}</Text>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={renderList}
      />
    </View>
  );
};

export default Header;

小建议 #

• 用map替代forEach来生成数组，代码更简洁高效
• 始终处理loading/error状态，提升用户体验，也避免潜在的报错

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