Firebase Firestore 的内容未在我的屏幕中呈现

Question

我正在使用 React Native 创建一个使用 Firebase 的简单待办事项应用。我使用了firestore数据库。我能够使用用户输入将数据推送到 Firebase。我也尝试在我的屏幕上获取数据，但我看不到数据。

dashboard.js（我希望在此处显示数据列表）

export default function Dash(){
  const [task, setTask] = useState();
  const [taskItems, setTaskItems] = useState([]);
  const [loading, setLoading] = useState(true);
  const todoCollection = db.collection('todos');

  useEffect(() => {
    return todoCollection.onSnapshot((querySnapshot) =>{
      const list=[];
      querySnapshot.forEach(doc => {
        const {text, done} = doc.data();
        list.push({
          id: doc.id,
          text,
          done,

        });
      });
      setTask(list);
      if (loading) {
        setLoading(false);
      }

    });
  }, [])


  async function addTask() {
    
   await todoCollection.add({
      text:task,
      done: false,
    

    }).then(()=> {
      alert ("Task added Succesfully")
    })
    setTask('');
  
  Keyboard.dismiss();  
  setTask(null);

  }



  const handleTask =()=>{
    Keyboard.dismiss();
    setTaskItems([...taskItems, task])
    setTask(null);
  }


  const deleteTask = (index) => {
    let itemsCopy = [...taskItems];
    itemsCopy.splice(index,1);
    setTaskItems(itemsCopy);
  }

  if (loading) {
    return null;
  }
    return(
      <>
      <View style = {styles.tasksWrapper}> 
      <Text style={styles.sectionTitle} >   ToDos List    </Text>
      
      <View style={{height:30}}></View> 
      
      <View style = {styles.items}>
        {/* {
          taskItems.map((item, index)=> {
           return(
             <Task text={item} del={deleteTask} i={index} />
           )
            
          })
        } */}
        <FlatList
        style={{flex: 1}}
        data={task}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => <Todo {...item} />}
      />
      </View>     
      </View>


      <KeyboardAvoidingView behavior={Platform.OS ==="ios"? "padding": "height"}
      style={styles.writeTaskWrapper}>
        <TextInput style={styles.input} placeholder={'write a task'} value={task} onChangeText={text => setTask(text)}/> 
      <TouchableOpacity onPress={()=>addTask()}>
        <View style={styles.addWrapper}>
          <Text style={styles.addText}> + </Text>
        </View>
      </TouchableOpacity>
      </KeyboardAvoidingView>
      </>
    )
}

Todo.js

import React from 'react';
import {db} from '../firebase/fire';
import { List } from 'react-native-paper';

function Todo({ id, text, done }) {
  async function toggleComplete() {
    await db
      .collection('todos')
      .doc(id)
      .update({
        done: !done,
      });
  }

  return (
    <List.Item
      text={text}
      onPress={() => toggleComplete()}
      left={props => (
        <List.Icon {...props} icon={done ? 'check' : 'cancel'} />
      )}
    />
  );
}

export default React.memo(Todo);

应用未显示错误，但列表未呈现。