Flutter博客开发：如何读取Firestore文档值并跳转详情页

方法一：传递文档ID，详情页单独获取数据 #

这种方式适合数据量较大的场景，既避免传递冗余数据，又能保证详情页展示最新内容。

1. 首页卡片点击时传递文档ID #

在StreamBuilder的itemBuilder中，给每个卡片添加点击事件，将当前Firestore文档的ID传入详情页：

StreamBuilder<QuerySnapshot>(
  stream: FirebaseFirestore.instance.collection('blogs').snapshots(),
  builder: (context, snapshot) {
    if (!snapshot.hasData) return const CircularProgressIndicator();
    return ListView.builder(
      itemCount: snapshot.data!.docs.length,
      itemBuilder: (context, index) {
        final blogDoc = snapshot.data!.docs[index];
        return Card(
          child: ListTile(
            title: Text(blogDoc['title']),
            subtitle: Text(blogDoc['date'].toString()),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => BlogDetailPage(docId: blogDoc.id),
                ),
              );
            },
          ),
        );
      },
    );
  },
)

2. 详情页通过ID拉取完整数据 #

创建详情页组件，接收文档ID参数，通过FutureBuilder从Firestore获取对应文档的完整内容：

class BlogDetailPage extends StatelessWidget {
  final String docId;

  const BlogDetailPage({Key? key, required this.docId}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const AppBar(title: Text('博客详情')),
      body: FutureBuilder<DocumentSnapshot>(
        future: FirebaseFirestore.instance.collection('blogs').doc(docId).get(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) return const CircularProgressIndicator();
          final blogData = snapshot.data!.data() as Map<String, dynamic>;
          return Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(blogData['title'], style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
                const SizedBox(height: 16),
                Text('发布日期: ${blogData['date'].toString()}'),
                const SizedBox(height: 24),
                Text(blogData['body'], style: const TextStyle(fontSize: 16)),
              ],
            ),
          );
        },
      ),
    );
  }
}

方法二：直接传递文档数据 #

如果博客数据量较小，可直接把当前文档的完整数据传递到详情页，减少一次Firestore请求：

1. 首页传递文档数据 #

修改卡片点击事件，直接传入文档的Map格式数据：

onTap: () {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => BlogDetailPage(blogData: blogDoc.data() as Map<String, dynamic>),
    ),
  );
}

2. 详情页直接使用传递的数据 #

调整详情页参数，直接使用已传递的数据渲染页面：

class BlogDetailPage extends StatelessWidget {
  final Map<String, dynamic> blogData;

  const BlogDetailPage({Key? key, required this.blogData}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(blogData['title'])),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(blogData['title'], style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
            const SizedBox(height: 16),
            Text('发布日期: ${blogData['date'].toString()}'),
            const SizedBox(height: 24),
            Text(blogData['body'], style: const TextStyle(fontSize: 16)),
          ],
        ),
      ),
    );
  }
}

注意事项 #

• 方法一每次打开详情页都会拉取最新数据，适合对时效性要求高的场景；方法二使用快照数据，可能存在延迟更新的情况。
• 确保Firestore的权限规则允许详情页读取目标文档。

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