Flutter通过StreamBuilder检查Firestore用户是否存在的热重载问题解决

问题根因 #

StreamBuilder 首次触发构建时，Firestore 的快照流还未完成数据请求，此时 snapshot.hasData 为 false，会直接命中 else 逻辑返回 AddUser 页面，等流数据返回后才会重新构建切换到 UserHomeScreen，因此出现了短暂展示 AddUser 的问题。

修复方案 #

调整 StreamBuilder 的判断逻辑，新增加载状态处理，在流数据未返回时展示加载占位组件，避免提前渲染 AddUser 页面，修正后的代码如下：

class UserStream extends StatelessWidget {
  const UserStream({Key? key}) : super(key: key);
  
  // 把实例初始化提到build方法外，避免每次重复创建
  final FirebaseAuth auth = FirebaseAuth.instance;
  final FirebaseFirestore firestore = FirebaseFirestore.instance;

  @override
  Widget build(BuildContext context) {
    // 增加currentUser判空，避免用户未登录时出现空指针异常
    if (auth.currentUser == null) {
      // 可替换为你的未登录页面，比如登录页
      return const Scaffold(body: Center(child: CircularProgressIndicator()));
    }
    String uid = auth.currentUser!.uid;
    return StreamBuilder<DocumentSnapshot<Map<String, dynamic>>>(
      // 明确指定流的泛型类型，避免dynamic类型的安全隐患
      stream: firestore.collection('users').doc(uid).snapshots(),
      builder: (context, snapshot) {
        // 先处理错误场景
        if (snapshot.hasError) {
          return Scaffold(body: Center(child: Text('加载出错：${snapshot.error}')));
        }
        // 处理加载中状态，此时还未拿到流数据，展示加载占位
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Scaffold(body: Center(child: CircularProgressIndicator()));
        }
        // 加载完成后再判断文档是否存在
        if (snapshot.hasData && snapshot.data!.exists) {
          return const UserHomeScreen();
        } else {
          return AddUser(
            youtubeLink: '',
            bio: '',
            bioLink: '',
            displayName: '',
            instaLink: '',
            profilePhoto: '',
            tiktokLink: '',
            username: '',
          );
        }
      },
    );
  }
}

补充说明 #

如果不需要展示通用加载指示器，也可以使用你应用的全局骨架屏组件替代，体验会更一致。

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