从Firestore取数据后React Native FlatList无法渲染问题求助

核心问题 #

你的renderOtherComponent函数参数解构错误，FlatList的renderItem回调接收的对象中，当前列表项的数据存于item属性而非data，因此解构{data}会得到undefined。此外还有两个潜在问题需修复：

• getData函数中的data是全局变量，多次调用会导致数据重复累积
• useEffect未设置依赖数组，会触发无限重复执行

修复后的代码 #

1. 修正getData函数 #

将data数组移至函数内部，避免全局变量污染：

import { collection, query, getDocs, getFirestore } from "firebase/firestore"; 

const db = getFirestore();

export const getData = async ()=>{
    const q = query(collection(db, "myData"));
    const data = []; // 移至函数内部，每次调用生成新数组
    const querySnapshot = await getDocs(q);
    querySnapshot.forEach((doc) => {
        data.push(doc.data());
    });
    return data;
}

2. 修正Home组件 #

• 修复renderItem的参数解构逻辑
• 给useEffect添加空依赖数组
• 初始化myData为空数组而非null，避免FlatList初始渲染报错

import React, {useEffect, useState} from 'react'
import { View, SafeAreaView, FlatList } from 'react-native';
import style from './style';
import OtherComponent from '../../components/OtherComponent'
import { getData } from '../../services/getData';


export default function Home() {
    
    const [myData, setMyData] = useState([]) // 初始化为空数组，保证FlatList初始渲染正常
    
    useEffect(() => {
      getData().then(setMyData);
    }, []) // 添加空依赖数组，仅在组件挂载时执行一次

    // 解构item而非data，匹配FlatList的参数结构
    const renderOtherComponent = ({item}) =>(
      <View style={{flex: 1}} >
        <OtherComponent title={item.Title}  />
      </View>
    )  

    return (
        <SafeAreaView style={style.mainContainer} >
            <View style={style.mainContent} >
                <FlatList
                    data={myData}
                    renderItem={renderOtherComponent}
                    keyExtractor={item => item.id} // 统一用item保持语义一致
                    pagingEnabled
                />
            </View>
        </SafeAreaView>
    )
}

关键说明 #

• FlatList的renderItem回调参数结构为{ item, index, separators }，必须通过item获取当前项的数据
• 将data移至getData内部，确保每次调用都生成全新数组，避免旧数据残留
• 空依赖数组让useEffect仅执行一次，防止无限重复请求数据
• 初始化为空数组，避免FlatList因data为null触发渲染错误

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