React Native中如何确保Firebase RTDB加载完成后再结束Loading

核心问题 #

你的代码存在两个关键问题导致Loader提前结束：

1. useEffect依赖数组为空，但内部用到了异步获取的user——首次渲染时user可能未就绪，导致数据库查询路径错误，没拿到数据就把loading设为false。
2. 使用onValue实时监听却未处理订阅清理，也没考虑user更新后的重新查询逻辑。

具体修复方案 #

方案1：单次读取数据（适合无需实时同步场景）

如果仅需应用加载时拉取一次数据，用once()替代onValue()更合适，它会在数据读取完成后仅触发一次回调，确保数据加载完成后再关闭Loader：

import { once, ref } from 'firebase/database'
import React, { useEffect, useState } from 'react'
import { projectDatabase } from '../../config'
import useAuth from '../hooks/useAuth'

export const DataContext = React.createContext()

const DataLayer = ({ children }) => {
    const { userCredentials: user } = useAuth()
    const [company, setCompany] = useState('');
    const [loading, setLoading] = useState(true);
    const [properties, setProperties] = useState([]);

    useEffect(() => {
        // 先判断user是否就绪，避免路径错误
        if (!user) return;

        const fetchData = async () => {
            try {
                // 获取用户关联的company
                const userRef = ref(projectDatabase, `users/${user.uid}/company`);
                const userSnapshot = await once(userRef);
                const companyVal = userSnapshot.val();
                setCompany(companyVal);

                // 根据company拉取属性数据
                const propertiesRef = ref(projectDatabase, `providers/${companyVal}/properties`);
                const propertiesSnapshot = await once(propertiesRef);
                const propertiesVal = propertiesSnapshot.val();
                // 处理Firebase返回的对象转数组（若properties是对象而非数组）
                setProperties(propertiesVal ? Object.values(propertiesVal) : []);
            } catch (error) {
                console.error('数据加载失败:', error);
            } finally {
                // 无论成功失败，都关闭Loader
                setLoading(false);
            }
        };

        fetchData();
    }, [user]) // 依赖数组加入user，确保user就绪后重新执行查询

    return (
        <DataContext.Provider
            value={{
                properties,
                company,
                loading,
                // 注意：原代码中userEnquiries、chatId、acceptedBookings未定义，需补充或移除
            }}
        >
            {children}
        </DataContext.Provider>
    )
}

export default DataLayer

方案2：保留实时监听（需同步数据变化场景）

如果需要实时同步Firebase数据，需正确处理订阅和依赖清理：

import { onValue, ref, off } from 'firebase/database'
import React, { useEffect, useState } from 'react'
import { projectDatabase } from '../../config'
import useAuth from '../hooks/useAuth'

export const DataContext = React.createContext()

const DataLayer = ({ children }) => {
    const { userCredentials: user } = useAuth()
    const [company, setCompany] = useState('');
    const [loading, setLoading] = useState(true);
    const [properties, setProperties] = useState([]);
    // 保存订阅引用，用于组件卸载时清理
    const [propertiesListener, setPropertiesListener] = useState(null);

    useEffect(() => {
        if (!user) {
            setLoading(true);
            return;
        }

        // 监听用户的company变化
        const userRef = ref(projectDatabase, `users/${user.uid}/company`);
        const userUnsubscribe = onValue(userRef, (userSnapshot) => {
            const companyVal = userSnapshot.val();
            setCompany(companyVal);

            // 先移除之前的properties监听，避免重复订阅
            if (propertiesListener) {
                off(propertiesListener.ref, 'value', propertiesListener.callback);
            }

            if (!companyVal) {
                setProperties([]);
                setLoading(false);
                return;
            }

            // 监听properties数据变化
            const propertiesRef = ref(projectDatabase, `providers/${companyVal}/properties`);
            const callback = (propertiesSnapshot) => {
                const propertiesVal = propertiesSnapshot.val();
                setProperties(propertiesVal ? Object.values(propertiesVal) : []);
                setLoading(false);
            };
            onValue(propertiesRef, callback);
            setPropertiesListener({ ref: propertiesRef, callback });
        });

        // 组件卸载时清理所有订阅
        return () => {
            userUnsubscribe();
            if (propertiesListener) {
                off(propertiesListener.ref, 'value', propertiesListener.callback);
            }
        };
    }, [user])

    return (
        <DataContext.Provider
            value={{
                properties,
                company,
                loading,
                // 补充未定义的状态或移除对应属性
            }}
        >
            {children}
        </DataContext.Provider>
    )
}

export default DataLayer

额外注意点 #

• 原Context value中的userEnquiries、chatId、acceptedBookings未定义，会导致报错，需补充对应的useState或移除这些属性。
• 若Firebase返回的properties是对象格式，需用Object.values()转换为数组，否则页面无法正常遍历渲染。
• 无需在每个页面单独调用useEffect，通过Context统一管理数据是正确做法，只需修复Context内的加载逻辑即可。

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