Firebase获取单个文档后数据无法保存，变量始终为undefined

你的核心问题是异步操作执行时机和React状态管理逻辑错误：

• Firebase的get()是异步请求，代码会先执行后续的useEffect，此时请求还未返回，therapist还是初始值；
• 用var声明的变量不属于React状态，就算异步请求完成后更新了它，组件也不会重新渲染，后续代码依然拿不到最新值。

下面是修正后的完整代码：

function AccountPage() {
    const [{ patients, user }, dispatch] = useStateValue();
    // 用useState存储治疗师数据，状态更新会触发组件重新渲染
    const [therapist, setTherapist] = useState(null);
    // 存储拼接后的服务、语言文本
    const [allServices, setAllServices] = useState('');
    const [allLanguages, setAllLanguages] = useState('');

    // 把异步请求放到useEffect中，依赖user.uid确保用户ID存在时才发起请求
    useEffect(() => {
        if (!user?.uid) return; // 避免用户未加载时发起无效请求

        db.collection('therapists').doc(user.uid).get()
            .then((snapshot) => {
                const therapistData = snapshot.data();
                setTherapist(therapistData); // 更新状态触发组件重渲染
            })
            .catch(err => {
                console.error('获取治疗师数据失败:', err);
            });
    }, [user?.uid]);

    // 当therapist数据更新时，执行拼接逻辑
    useEffect(() => {
        if (!therapist) return; // 数据未加载时跳过执行

        // 用map+join简化服务标签拼接
        const serviceLabels = therapist.service.service.map(item => item.label);
        setAllServices(serviceLabels.join(', '));

        // 用map+join简化语言标签拼接
        const languageLabels = therapist.language.language.map(item => item.label);
        setAllLanguages(languageLabels.join(', '));
    }, [therapist]);

    // 处理数据加载状态，避免访问undefined属性报错
    if (!therapist) {
        return <div>加载中...</div>;
    }

    return (
        <div>
            <p>提供服务: {allServices}</p>
            <p>使用语言: {allLanguages}</p>
            {/* 其他页面内容 */}
        </div>
    );
}

关键修正说明： #

• 改用useState管理therapist状态，确保数据更新后组件自动重新渲染；
• 将异步请求放入useEffect并绑定user.uid依赖，避免无效请求；
• 拆分拼接逻辑到单独的useEffect，依赖therapist确保只有数据存在时才执行；
• 添加加载状态，防止数据未返回时访问属性导致报错；
• 用map+join替代循环拼接，代码更简洁易维护。

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