Flutter Web添加图片上传功能后Firestore绑定的表格UI未更新问题

你遇到的问题是异步操作时序和路由跳转逻辑共同导致的，核心有两点：

• 未等待异步写入操作完成就执行跳转：新增图片上传逻辑后，addNewInvoice需要先完成图片上传到Storage、获取下载URL、写入Firestore三个异步步骤，耗时远高于之前纯文本写入。你没有给这个异步方法加await，方法还没执行完就触发了页面跳转，Firestore还没完成数据写入，StreamBuilder自然收不到新数据的快照通知。
• 路由跳转逻辑错误：你用Navigator.push往路由栈新增了一个全新的HomePage实例，而非回到之前已经存在的HomePage。就算后续Firestore写入完成，事件通知也只会发送给路由栈中旧的HomePage实例，新打开的页面不会收到更新通知。

1. 修正提交按钮的异步逻辑 #

修改提交按钮的onPressed代码，等待写入操作完成后直接返回原有页面，不要新建页面：

//Create Invoice Button
MaterialButton(
  onPressed: () async {
    // 可选：加loading弹窗避免用户重复点击
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (context) => const Center(child: CircularProgressIndicator()),
    );

    Invoice invoice = Invoice(
      _controllerInvoiceNumber.text,
      _controllerLocation.text,
      invoiceDate,
      _controllerAmount.text,
    );

    // 等待所有写入操作完全完成
    await Database().addNewInvoice(
      invoice,
      _userId!,
      image!,
    );

    // 确认组件未被销毁后，依次关闭loading、表单弹窗，回到原有表格页面
    if (mounted) {
      Navigator.pop(context); // 关闭loading弹窗
      Navigator.pop(context); // 关闭表单弹窗
    }
  },
  child: const Text('Create'),
),

2. 确保addNewInvoice方法返回正确的Future #

检查你的Database类中的addNewInvoice方法，要确保所有异步操作都被正确等待，方法返回Future<void>：

Future<void> addNewInvoice(Invoice invoice, String userId, MediaInfo image) async {
  // 第一步：上传图片到Storage
  final storageRef = FirebaseStorage.instance
      .ref()
      .child('invoices/$userId/${DateTime.now().millisecondsSinceEpoch}.jpg');
  final uploadSnapshot = await storageRef.putData(image.data!);
  // 第二步：获取图片下载URL
  final imageUrl = await uploadSnapshot.ref.getDownloadURL();
  // 第三步：将所有字段写入Firestore
  await FirebaseFirestore.instance.collection('Invoices').add({
    'invoiceNumber': invoice.number,
    'location': invoice.location,
    'date': invoice.date,
    'amount': invoice.amount,
    'imageUrl': imageUrl,
    'userId': userId,
  });
}

3. 补充检查项 #

• 确认_createRows方法没有过滤带imageUrl字段的新文档，所有从快照读取的文档都被正确转换为表格行
• 确认Firestore的权限规则允许读取你新写入的带图片字段的文档

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