Flutter从Firebase Database读取数据重复问题求助

核心问题 #

每次热重载或切换底部导航时，build方法会重复执行，你在getDocId()中持续向docIDs列表添加数据却未清空，导致旧数据保留、新数据叠加，最终出现重复条目。另外，selectedindex定义在build方法内，每次UI重建都会被重置为0，间接触发不必要的刷新，加重数据重复问题。

具体修复步骤 #

1. 清空列表后再添加数据

修改getDocId()方法，在获取新数据前先清空旧列表，避免重复叠加：

Future getDocId() async {
  docIDs.clear(); // 新增：清空旧数据
  await FirebaseFirestore.instance
      .collection('Users')
      .orderBy('First Name')
      .get()
      .then(
        (snapshot) => snapshot.docs.forEach(
          (document) {
            print(document.reference);
            docIDs.add(document.reference.id);
          },
        ),
      );
}

2. 修复底部导航选中状态重置问题

把selectedindex从build方法内移到_HomePage类的成员变量中，防止每次UI重建时被重置：

class _HomePage extends State<HomePage> {
  final user = FirebaseAuth.instance.currentUser!;
  List<String> docIDs = [];
  int selectedindex = 0; // 移至此处作为类成员变量

  // ... 其他原有代码
}

// 删除build方法内的`int selectedindex = 0;`语句

3. 避免异步方法重复执行（可选优化）

FutureBuilder的future参数直接传getDocId()时，每次build都会重新调用该异步方法。建议在页面初始化时仅执行一次：

@override
void initState() {
  super.initState();
  getDocId(); // 页面初始化时仅调用一次数据获取
}

// 同时修改FutureBuilder部分代码
FutureBuilder(
  future: null, // 无需重复传入异步方法
  builder: (context, snapshot) {
    // 数据未加载完成时显示加载指示器
    if (docIDs.isEmpty) {
      return const Center(child: CircularProgressIndicator());
    }
    // 数据加载完成后渲染列表
    return ListView.builder(
      itemCount: docIDs.length,
      itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.all(5.0),
          child: Container(
            decoration: BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.circular(20)),
            child: ListTile(
              textColor: Colors.white,
              selectedColor: Colors.yellow,
              title: GetUserName(documentId: docIDs[index]),
            ),
          ),
        );
      },
    );
  },
)

进阶优化：用StreamBuilder实时监听数据

如果需要实时同步Firestore中的数据变化，建议替换FutureBuilder为StreamBuilder，彻底避免手动维护列表的问题：

Expanded(
  child: StreamBuilder<QuerySnapshot>(
    stream: FirebaseFirestore.instance
        .collection('Users')
        .orderBy('First Name')
        .snapshots(),
    builder: (context, snapshot) {
      if (!snapshot.hasData) {
        return const Center(child: CircularProgressIndicator());
      }
      return ListView.builder(
        itemCount: snapshot.data!.docs.length,
        itemBuilder: (context, index) {
          final doc = snapshot.data!.docs[index];
          return Padding(
            padding: const EdgeInsets.all(5.0),
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(20)),
              child: ListTile(
                textColor: Colors.white,
                selectedColor: Colors.yellow,
                title: GetUserName(documentId: doc.id),
              ),
            ),
          );
        },
      );
    },
  ),
)

此方式会自动监听Firestore集合的变化，实时更新UI，无需手动调用数据获取方法。

内容的提问来源于stack exchange，提问作者ناصر بلوچ