Flutter向Firebase添加数据时重复循环的问题求助

数据重复显示的核心原因：

• docIDs列表每次调用getDocId()时只会追加数据，不会清空旧内容
• FutureBuilder在UI重建（比如上传数据后触发刷新）时，会重新执行getDocId()，导致相同的文档ID被多次添加到docIDs中，最终列表出现重复条目；热重启后列表被重置，所以恢复正常。

方案1：清空现有列表后重新填充 #

修改getDocId()方法，每次获取数据前先清空docIDs，避免重复追加：

Future getDocId() async {
  docIDs.clear(); // 清空旧数据
  await FirebaseFirestore.instance
      .collection('users')
      .orderBy('mobile', descending: true)
      .get()
      .then(
        (snapshot) => snapshot.docs.forEach(
          (document) {
            print(document.reference);
            docIDs.add(document.reference.id);
          },
        ),
      );
}

方案2：返回新列表（更推荐） #

避免修改全局/类成员变量，直接返回新的ID列表，每次获取都是全新数据，不会出现重复：

// 修改getDocId返回列表
Future<List<String>> getDocId() async {
  final snapshot = await FirebaseFirestore.instance
      .collection('users')
      .orderBy('mobile', descending: true)
      .get();
  return snapshot.docs.map((document) => document.reference.id).toList();
}

// 对应修改FutureBuilder代码
body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Expanded(
          child: FutureBuilder<List<String>>(
            future: getDocId(),
            builder: (context, snapshot) {
              // 处理加载状态
              if (snapshot.connectionState != ConnectionState.done) {
                return const Center(child: Text('Loading..'));
              }
              // 获取数据，为空时返回空列表
              final docIDs = snapshot.data ?? [];
              return ListView.builder(
                itemCount: docIDs.length,
                itemBuilder: (context, index) {
                  return Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: ListTile(
                      title: ReadUser(documentId: docIDs[index]),
                      tileColor: Colors.purple[100],
                    ),
                  );
                },
              );
            },
          ),
        ),
      ],
    ),
)

额外优化：避免FutureBuilder重复执行 #

直接把getDocId()传给FutureBuilder的future参数，会导致每次UI重建都创建新的Future，触发重复请求。可以在页面初始化时保存Future实例：

late final Future<List<String>> _docIdsFuture;

@override
void initState() {
  super.initState();
  // 只在初始化时执行一次
  _docIdsFuture = getDocId();
}

// 后续FutureBuilder使用这个保存的实例
FutureBuilder<List<String>>(
  future: _docIdsFuture,
  // ...其他代码
)

如果需要在上传数据后刷新列表，可以调用setState重新初始化_docIdsFuture：

void refreshDocIds() {
  setState(() {
    _docIdsFuture = getDocId();
  });
}

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