Flutter中如何将Firebase数据显示到Text组件？

要在Text组件中显示Firestore存储的用户名，你需要通过异步方式读取对应文档的数据，以下是具体修改方案：

核心修改步骤 #

• 确认用户已通过Firebase Auth登录，获取当前用户的UID（这是访问你存储的用户文档的唯一标识）
• 使用StreamBuilder实时监听Firestore文档变化，或FutureBuilder一次性获取数据，替换原来硬编码的Text组件

修改后的代码片段 #

将你代码中硬编码的Text('gfffff', ...)替换为以下代码：

StreamBuilder<DocumentSnapshot>(
  // 监听当前用户UID对应的Userdata文档
  stream: FirebaseFirestore.instance
      .collection("Userdata")
      .doc(FirebaseAuth.instance.currentUser?.uid)
      .snapshots(),
  builder: (context, snapshot) {
    // 处理加载状态
    if (snapshot.connectionState == ConnectionState.waiting) {
      return Text(
        '加载中...',
        style: TextStyle(
            fontFamily: "Montserrat Medium",
            color: Colors.white,
            fontSize: 20),
      );
    }
    // 处理无数据情况
    if (!snapshot.hasData || snapshot.data!.data() == null) {
      return Text(
        '未找到用户名',
        style: TextStyle(
            fontFamily: "Montserrat Medium",
            color: Colors.white,
            fontSize: 20),
      );
    }
    // 解析数据并显示用户名
    Map<String, dynamic> userData = snapshot.data!.data() as Map<String, dynamic>;
    return Text(
      userData['name'] ?? '匿名用户',
      style: TextStyle(
          fontFamily: "Montserrat Medium",
          color: Colors.white,
          fontSize: 20),
    );
  },
),

关键注意事项 #

• 用户登录校验：如果用户未登录，FirebaseAuth.instance.currentUser会返回null，导致无法读取文档。你需要在页面初始化时检查用户状态，未登录则跳转至登录页面。
• Firestore安全规则：确保你的Firestore安全规则允许当前用户读取自己的文档，示例规则如下：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /Userdata/{uid} {
      allow read, write: if request.auth != null && request.auth.uid == uid;
    }
  }
}

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