我创建了一个空的状态数组，然后从firebase推送数据。

const [chats, setChats] = useState([]);

当我使用console.log(chats)函数时，它会正确地返回数组

useEffect(() => {
    async function GetChats() {
      const data = chats;
      const querySnapshot = await getDocs(collection(db, "chat"));
      querySnapshot.forEach((doc) => {
        data.push({
          id: doc.id,
          data: doc.data(),
        });
        setChats(data);
      });
    }
    GetChats();
  }, []);
console.log(chats)

控制台：
1.[{…}]
1.0:
1.data: {cinsiyet: 'erkek', memleket: 'rize', name: 'kutay akgün'}
1.id: "Kutay"

1. [[Prototype]]: Object
   1.1:
   1.data: {memleket: 'Rize', name: 'Ali Aydın', cinsiyet: 'Erkek'}
   1.id: "Ali"
2. [[Prototype]]: Object
   1.2:
   1.data: {cinsiyet: 'Kadın', name: 'Fatma Aydın', memleket: 'Rize'}
   1.id: "Fatma"
3. [[Prototype]]: Object
   1.3:
   1.data: {cinsiyet: 'Erkek', memleket: 'Rize', name: 'Kutay Aydın'}
   1.id: "Kutay"
4. [[Prototype]]: Object
   1.length: 4
5. [[Prototype]]: Array(0)

目前为止没有问题

但是，当我尝试用map函数将数组渲染到组件时，它会返回注解。我也用return，但不管用。

return (
    
    <SafeAreaView>
      <ScrollView>
      {
          chats.map((chat) => {
            return (
            
              <Text key={chat.id}>{chat.data.name}</Text>
            );
          })
          
      
     }
      </ScrollView>
    </SafeAreaView>
  );

聊天数组类型从来不是[]。为了解决这个问题，我手动添加了一个数据来定义数组的类型

const [chats, setChats] = useState([{id: "Kutay",data:{cinsiyet: "erkek", memleket: "rize", name: "kutay akgün"}}]);

现在是这样的：

const chats: {
    id: string;
    data: {
        cinsiyet: string;
        memleket: string;
        name: string;
    };
}[]

这是真的
但是现在当我尝试渲染数组时。它只呈现我手动添加的第一个元素。
我如何才能使其他元素也呈现？？