如何在Flutter中从Firebase Firestore获取文档ID并用于ListView

1. 确保Firebase初始化完成 #

先在main函数中完成Firebase初始化，这是所有Firebase操作的前提：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

2. 获取集合内的文档ID列表 #

定义异步方法从Firestore查询集合，提取所有文档ID并转为List<String>：

Future<List<String>> getDocumentIds() async {
  // 替换为你实际的集合名称
  final collectionRef = FirebaseFirestore.instance.collection('your_collection_name');
  final querySnapshot = await collectionRef.get();
  // 遍历快照提取文档ID
  return querySnapshot.docs.map((doc) => doc.id).toList();
}

3. 用ListView.separated构建列表 #

使用FutureBuilder处理异步数据加载，结合ListView.separated展示文档ID，同时实现点击跳转逻辑：

class DocumentListPage extends StatelessWidget {
  const DocumentListPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('文档列表')),
      body: FutureBuilder<List<String>>(
        future: getDocumentIds(),
        builder: (context, snapshot) {
          // 加载中状态
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          // 加载错误状态
          if (snapshot.hasError) {
            return Center(child: Text('加载失败: ${snapshot.error}'));
          }
          // 空数据处理
          final docIds = snapshot.data ?? [];
          if (docIds.isEmpty) {
            return const Center(child: Text('暂无文档'));
          }
          // 构建列表
          return ListView.separated(
            itemCount: docIds.length,
            separatorBuilder: (context, index) => const Divider(height: 1),
            itemBuilder: (context, index) {
              final currentDocId = docIds[index];
              return ListTile(
                title: Text(currentDocId),
                onTap: () {
                  // 点击跳转到详情页，传递文档ID
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => DocumentDetailPage(docId: currentDocId),
                    ),
                  );
                },
              );
            },
          );
        },
      ),
    );
  }
}

4. 详情页加载并展示文档字段 #

创建详情页，接收传递的文档ID，查询对应文档并展示字段：

class DocumentDetailPage extends StatelessWidget {
  final String docId;
  const DocumentDetailPage({super.key, required this.docId});

  // 查询单个文档数据
  Future<DocumentSnapshot> getDocumentData() async {
    return FirebaseFirestore.instance
        .collection('your_collection_name') // 同样替换为实际集合名
        .doc(docId)
        .get();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('文档详情: $docId')),
      body: FutureBuilder<DocumentSnapshot>(
        future: getDocumentData(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          if (snapshot.hasError) {
            return Center(child: Text('加载失败: ${snapshot.error}'));
          }
          if (!snapshot.hasData || !snapshot.data!.exists) {
            return const Center(child: Text('该文档已不存在'));
          }
          // 解析文档数据（根据你的实际字段修改）
          final docData = snapshot.data!.data() as Map<String, dynamic>;
          return Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('标题: ${docData['title'] ?? '无'}', style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                const SizedBox(height: 12),
                Text('内容: ${docData['content'] ?? '无'}'),
                // 其他字段按需添加
              ],
            ),
          );
        },
      ),
    );
  }
}

额外注意事项 #

• 替换代码中your_collection_name为你Firestore中的实际集合名称
• 开发阶段可临时设置Firestore安全规则为allow read, write: if true;方便测试，上线前务必修改为符合业务需求的安全规则
• 如果需要实时监听文档列表变化，可将FutureBuilder替换为StreamBuilder，使用snapshots()方法监听集合更新

内容的提问来源于stack exchange，提问作者Al-sabbagh Melad