Angular中两个Observable配合使用获取用户数据返回undefined如何解决

你的代码出现_user返回undefined的核心原因是异步执行逻辑顺序错误：

• this.authService.getUser().subscribe()的回调是异步执行的，会晚于外层getUser()方法的同步返回逻辑
• 执行return userTempo时，回调还没触发，userTempo还没有被赋值，自然返回undefined，模板的async管道也就无法订阅到有效数据流
• 额外问题：手动订阅authService.getUser()没有做销毁处理，存在内存泄漏风险

你不需要手动订阅用户流，使用RxJS的switchMap操作符，将认证用户流直接转换为Firestore用户数据流即可，符合Angular+RxJS的最佳实践：

1. 先在user-settings.component.ts头部导入所需依赖：

import { of } from 'rxjs';
import { switchMap } from 'rxjs/operators';

2. 替换你原有的_user定义和getUser()方法：

// 直接定义组合后的用户流，不需要单独写getUser方法
_user: Observable<User> = this.authService.getUser().pipe(
  switchMap(user => {
    // 增加未登录空值判断，避免报错
    if (!user) return of(null);
    return this.db.collection('user').doc(user.uid).valueChanges({ idField: 'id' }) as Observable<User>;
  })
);

修改完成后模板不需要做任何调整，async管道会自动订阅_user流，拿到数据后自动渲染页面。

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