Firebase按createdAt时间戳排序track ID未生效问题求助

开发者阿泽

2026-9-29

问题核心原因

Firebase 查询返回的 snapshot 本身已经是按 createdAt 排序好的结构，但是调用 .val() 会将有序的快照转换为普通 JavaScript 对象，而 JS 原生对象的键遍历顺序不保证和快照顺序一致，这就是排序失效的根本原因。

方案1 问题及修正

原方案1直接取snapshot.val()再用for in遍历破坏了排序，应直接遍历snapshot本身：

const [trackList, setTrackList] = useState([]); // 建议初始化空数组避免渲染报错

// 修正后的Option 1
useEffect(() => {
    const userID = localStorage.getItem('id')
    firebase.database().ref(userID)
        .orderByChild('createdAt')
        .once('value', (snapshot) => {
            const trackList = [];
            // 直接遍历snapshot，不要先转val()
            snapshot.forEach((childSnapshot) => {
                trackList.push({ 
                    id: childSnapshot.key, 
                    ...childSnapshot.val() 
                });
            })
            setTrackList(trackList);
        });
}, []);

方案2 问题及修正

原方案2存在两处错误：

trackList 定义在 forEach 循环内部，作用域仅限循环内，外部调用 setTrackList 时拿到的是未定义值
同样存在先转.val()再遍历破坏排序的问题

// 修正后的Option 2
useEffect(() => {
    const userID = localStorage.getItem('id')
    const trackRef = firebase.database().ref(userID).orderByChild("createdAt").limitToLast(100);
    trackRef.on('value', (snapshot) => {
        const trackList = []; // 把数组定义提到循环外
        snapshot.forEach(symptomSnapshot => {
            trackList.push({
                id: symptomSnapshot.key,
                ...symptomSnapshot.val()
            })
        });
        setTrackList(trackList);
    });
}, []);