如何用StreamBuilder正确读取Firestore数据？页面始终空白

1. 集合名称不匹配（核心问题） #

你存储数据时用的集合是usersVitals，但读取时写成了userVitals（少了末尾的s），这直接导致Stream读不到任何数据：

• 存储代码中的集合：collection("usersVitals")
• 读取代码中的集合：collection("userVitals")

修正readVitals方法：

Stream<QuerySnapshot> readVitals() async* {
  final user = FirebaseAuth.instance.currentUser;
  if (user == null) return; // 处理未登录情况

  yield* FirebaseFirestore.instance
      .collection('vitalsign')
      .doc(user.uid)
      .collection("usersVitals") // 修正为usersVitals
      .snapshots();
}

2. 完善StreamBuilder的状态处理 #

你的StreamBuilder没有处理错误状态，且hasData判断逻辑存在冗余，可能导致异常被隐藏。优化后的代码：

StreamBuilder<QuerySnapshot>(
  stream: readVitals(),
  builder: (context, snapshot) {
    // 处理错误状态
    if (snapshot.hasError) {
      return Text('加载失败: ${snapshot.error}');
    }
    // 加载中状态
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircularProgressIndicator();
    }
    // 无数据状态
    if (snapshot.data?.docs.isEmpty ?? true) {
      return const Text('暂无生命体征数据');
    }
    // 有数据时渲染列表
    return ListView.builder(
      itemCount: snapshot.data!.docs.length,
      itemBuilder: (context, index) {
        final doc = snapshot.data!.docs[index];
        // 使用Vital模型解析数据，避免直接读取字段的空指针风险
        final vital = Vital.fromSnapShot(doc as DocumentSnapshot<Map<String, dynamic>>);
        return buildPressure(context, vital);
      },
    );
  },
)

3. 优化数据模型使用与UI渲染 #

直接读取document字段容易出现空指针，改用Vital模型解析，同时调整Widget来匹配你期望的按日期展示格式：

// 修正buildPressure方法，接收Vital对象
Widget buildPressure(BuildContext context, Vital vital) {
  // 格式化日期为"dayX"格式
  String formatDay(DateTime date) {
    final today = DateTime.now();
    final diff = today.difference(date).inDays;
    return diff == 0 ? '今天' : 'day${today.day - date.day}';
  }

  return Card(
    margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
    child: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(formatDay(vital.createdOn!), style: const TextStyle(color: Colors.grey)),
          const SizedBox(height: 8),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text('血压', style: TextStyle(fontSize: 16)),
              Text(vital.bloodPressure, style: const TextStyle(fontSize: 18)),
            ],
          ),
          const Divider(height: 16),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text('血糖', style: TextStyle(fontSize: 16)),
              Text(vital.bloodSugar, style: const TextStyle(fontSize: 18)),
            ],
          ),
        ],
      ),
    ),
  );
}

4. 配置Firestore权限确保数据隔离 #

为保证用户只能访问自己的数据，在Firebase控制台的Firestore规则中设置：

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

5. 修正数据存储的ID逻辑 #

你当前把集合ID作为Vital的id字段存储，但Firestore的add方法会自动生成文档ID，正确做法是去掉手动设置的id，避免冗余：

// 修正Vital的toJson方法，移除id字段
Map<String, dynamic> toJson() => {
      'bloodSugar': bloodSugar,
      'bloodPressure': bloodPressure,
      'bodyTemp': bodyTemp,
      "createdOn": Utils.fromDateTimeToJson(createdOn)
    };

// 修正addVitals中的Vital实例化
final vital = Vital(
  createdOn: DateTime.now(),
  bloodSugar: _bloodSugar.text,
  bloodPressure: _bloodPressure.text,
  bodyTemp: _bodyTemp.text,
);

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