React Native+Firebase V9如何按时间戳排序展示Firebase数据

有两种可行的方案实现按日期（timestamp）排序，推荐优先使用数据库端排序，效率更高：

方案一：Firebase数据库端排序（推荐） #

直接在查询时指定排序规则，Firebase会返回已经排好序的数据。需要先导入orderBy方法，然后在collection后链式调用orderBy指定排序字段和顺序。

修改后的fetchData函数： #

import { collection, getDocs, query, orderBy } from "firebase/firestore"; // 新增导入orderBy

const fetchData = async () => {
    let list = [];
    // 链式调用orderBy，按timestamp字段降序（最新的在前），升序用asc
    const querySnapshot = await getDocs(
        query(collection(database, 'cases'), orderBy('timestamp', 'desc'))
    );
    querySnapshot.forEach((doc) => {
        list.push({ id: doc.id, ...doc.data() });
    });
    setDataCases(list);
};

注意：确保你的cases集合中每个文档都有timestamp字段，且类型为Firebase的Timestamp类型或时间戳数字。如果需要升序排列，把'desc'改成'asc'即可。

方案二：前端获取数据后排序 #

如果需要在前端处理排序，可以在获取数据后使用数组的sort方法：

修改后的fetchData函数： #

const fetchData = async () => {
    let list = [];
    const querySnapshot = await getDocs(
        collection(database, 'cases')
    );
    querySnapshot.forEach((doc) => {
        list.push({ id: doc.id, ...doc.data() });
    });
    // 按timestamp降序排序
    const sortedList = list.sort((a, b) => {
        // 如果是Firebase Timestamp类型，转成毫秒数比较
        const timeA = a.timestamp.toMillis();
        const timeB = b.timestamp.toMillis();
        return timeB - timeA; // 降序，升序用timeA - timeB
    });
    setDataCases(sortedList);
};

注意：如果你的timestamp是普通的时间戳数字（比如1699999999000），直接比较数值即可：return b.timestamp - a.timestamp。

完整修改后的组件代码（方案一） #

import { useState, useEffect } from 'react';
import { View, Text, FlatList } from 'react-native';
import { collection, getDocs, query, orderBy } from "firebase/firestore";
import HomeHeader from './HomeHeader'; // 假设你的组件路径正确
import CasesData from './CasesData';

export default function Cases() {
    const [dataCases, setDataCases] = useState([]);

    const fetchData = async () => {
        let list = [];
        const querySnapshot = await getDocs(
            query(collection(database, 'cases'), orderBy('timestamp', 'desc'))
        );
        querySnapshot.forEach((doc) => {
            list.push({ id: doc.id, ...doc.data() });
        });
        setDataCases(list);
    };

    useEffect(() => {
        fetchData();
    }, []);

    return (
        <>
            <HomeHeader />

            <View>
                <Text className='text-white text-2xl ml-5'>Latest Cases</Text>

                <View>
                    <FlatList
                        data={dataCases}
                        renderItem={({ item }) => <CasesData item={item} />}
                        keyExtractor={(item) => item.id} // 建议加上keyExtractor优化FlatList性能
                    />
                </View>
            </View>
        </>
    );
}

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