Flutter项目点击列表项跳转详情页出现变量未定义错误

问题根源 #

你遇到的错误Try correcting the name to the name of an existing getter, or defining a getter or field named 'courses'，核心原因是**navigateToDetail方法里引用了未定义的变量courses**。

你在点击列表项时，已经把对应的DocumentSnapshot（单个课程的数据）作为参数传给了navigateToDetail，但方法内部没有给这个参数命名，也没有正确使用它，反而写了courses: courses——这里的第二个courses是完全不存在的变量，所以编译器报错。

修复步骤 #

只需要修改ListPage中的navigateToDetail方法：

1. 给方法的参数命名（比如course，更符合单个数据的语义）
2. 在跳转时传递这个命名后的参数给DetailPage

修改后的navigateToDetail代码：

void navigateToDetail(DocumentSnapshot course) {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => DetailPage(courses: course),
    ),
  );
}

完整修改后的ListPage代码（关键部分已修正） #

class ListPage extends StatefulWidget {
  @override
  _ListPageState createState() => _ListPageState();
}

class _ListPageState extends State<ListPage> {
  Future getPosts() async {
    var firestore = FirebaseFirestore.instance;
    QuerySnapshot qn = await firestore.collection('courses').get();
    return qn.docs;
  }

  // 修正后的导航方法
  void navigateToDetail(DocumentSnapshot course) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => DetailPage(courses: course),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: FutureBuilder(
        future: getPosts(),
        builder: (_, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(
              child: Text('Loading'),
            );
          } else {
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (_, index) {
                return ListTile(
                  leading: Image.network(snapshot.data[index].data()['img']),
                  title: Text(snapshot.data[index].data()['details']),
                  subtitle: Text(snapshot.data[index].data()['name']),
                  onTap: () => navigateToDetail(snapshot.data[index]),
                );
              },
            );
          }
        },
      ),
    );
  }
}

额外优化建议 #

• 给getPosts方法指定返回类型，让代码更健壮：Future<List<DocumentSnapshot>> getPosts() async { ... }
• 如果使用的是较新版本的Firebase，data()方法返回可空类型，可添加非空断言（确保数据存在的情况下）：snapshot.data[index].data()!['img']
• 把DetailPage的构造参数命名改为course（单个课程），语义更准确：

class DetailPage extends StatefulWidget {
  final DocumentSnapshot course;
  DetailPage({required this.course}); // 推荐使用required关键字，避免空值

  @override
  _DetailPageState createState() => _DetailPageState();
}

// 对应build方法里改为：
title: Text(widget.course.data()!['name']),
subtitle: Text(widget.course.data()!['details']),

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