Flutter点击Firestore列表项跳转详情页获取对应单文档方法

现有代码无法正常展示详情，核心是两个错误：

• 列表点击跳转时没传递被点击条目的唯一文档ID，详情页调用FirebaseFirestore.instance.collection('users').doc()不传参数，会自动生成指向不存在的随机新文档的引用，根本获取不到点击项的数据
• 详情页把异步数据请求写在build方法内，name/title等变量定义在then回调的局部作用域中，build方法无法访问这些变量，自然无法完成渲染

第一步：修改主页面跳转逻辑，传递文档ID #

找到主页面InkWell组件的onTap回调，修改跳转代码，把当前列表项对应的文档ID传入详情页：

onTap: () {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => DetailPage(blogId: documentSnapshot.id),
    ),
  );
},

第二步：重构详情页，接收参数并拉取对应文档数据 #

重写DetailPage代码，新增参数接收传入的文档ID，用FutureBuilder处理异步请求的加载、错误、数据渲染全流程：

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';

class DetailPage extends StatelessWidget {
  // 接收传入的目标文档ID
  final String blogId;
  const DetailPage({Key? key, required this.blogId}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 用传入的ID生成指向目标文档的正确引用
    final DocumentReference docRef = FirebaseFirestore.instance.collection('users').doc(blogId);

    return Scaffold(
      appBar: AppBar(
        backgroundColor: const Color.fromARGB(255, 77, 70, 70),
        elevation: 0,
        title: const Text('博客详情'),
        centerTitle: true,
      ),
      body: FutureBuilder<DocumentSnapshot>(
        future: docRef.get(),
        builder: (context, snapshot) {
          // 加载中状态
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          // 加载错误状态
          if (snapshot.hasError) {
            return const Center(child: Text('数据加载失败，请重试'));
          }
          // 文档不存在状态
          if (!snapshot.hasData || !snapshot.data!.exists) {
            return const Center(child: Text('该内容已被删除'));
          }
          // 解析文档数据，做空值兜底避免字段缺失报错
          final Map<String, dynamic> data = snapshot.data!.data() as Map<String, dynamic>;
          final String name = data['name'] ?? '匿名作者';
          final String title = data['title'] ?? '无标题';
          final String blog = data['blog'] ?? '';
          final String imgUrl = data['imgUrl'] ?? '';

          // 渲染完整详情内容
          return SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Image.network(
                  imgUrl,
                  width: double.infinity,
                  height: 250,
                  fit: BoxFit.cover,
                  errorBuilder: (context, error, stackTrace) => Container(
                    height: 250,
                    color: Colors.grey[300],
                    child: const Icon(Icons.broken_image),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        title,
                        style: const TextStyle(
                          fontSize: 24,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      const SizedBox(height: 8),
                      Text(
                        '作者：$name',
                        style: const TextStyle(
                          fontSize: 16,
                          color: Colors.grey,
                        ),
                      ),
                      const SizedBox(height: 16),
                      Text(
                        blog,
                        style: const TextStyle(
                          fontSize: 16,
                          height: 1.6,
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          );
        },
      ),
    );
  }
}

• 新增加载中、加载失败、内容不存在的兜底状态，避免白屏和无提示报错
• 所有字段加空值兜底，避免Firestore字段缺失导致的类型崩溃
• 给网络图片加加载错误兜底，避免图片链接失效时页面崩溃
• 用SingleChildScrollView包裹内容，支持长文本滚动，避免内容溢出屏幕
• 补全封面图、作者、标题、正文的完整布局，和列表页字段完全对应

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