使用 StreamBuilder 從 Firestore 文檔中獲取數據

Question

在我的 Flutter 應用程序中，我試圖從 Firestore 中的文檔獲取數據。 這是我想要獲取的數據：

Firestore 文檔的數據

我需要從文檔中獲取url 。 到目前為止，當我需要從集合中獲取數據時，我使用了Streambuilder 。 但是在這里我需要從文檔中獲取數據，所以我得到了這個錯誤信息：

late Stream<DocumentSnapshot<Map<String, dynamic>>>? personnalData =
      FirebaseFirestore.instance
          .collection('Decembre')
          .doc(uid)
          .collection('Docs')
          .doc('test')
          .snapshots();

   StreamBuilder<QuerySnapshot>(
              stream: personnalData, // Error: The argument type 'Stream<DocumentSnapshot<Map<String, dynamic>>>?' can't be assigned to the parameter type 'Stream<QuerySnapshot<Map<String, dynamic>>>?'.
              builder: (BuildContext context,
                  AsyncSnapshot<QuerySnapshot> snapshot) {
                if (snapshot.hasError) {
                  return const Text('Something went wrong');
                }
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return Center(child: CircularProgressIndicator());
                }
                return Stack(
                  children: snapshot.data!.docs
                      .map((DocumentSnapshot document) {
                        Map<String, dynamic> data =
                            document.data()! as Map<String, dynamic>;

                        return PageView.builder(
                                            controller: _controller,
                                            itemCount: 3,
                                            itemBuilder: (context, index) {
                                             
                                              return Container(
                                                child: InteractiveViewer(
                                                  minScale: 0.1,
                                                  maxScale: 4.0,
                                                  child: Image.network(
                                                // FETCH URL FROM DOCUMENT 'TEST'
                                                    width:
                                                        MediaQuery.of(context)
                                                            .size
                                                            .width,
                                                    fit: BoxFit.cover,
                                                    loadingBuilder: (context,
                                                        child,
                                                        loadingProgress) {
                                                      if (loadingProgress ==
                                                          null) {
                                                        return child;
                                                      } else {
                                                        return Center(
                                                          child:
                                                              
                                                   CircularProgressIndicator(),
                                                        );
                                                ),
                                              );
                                            }),
                                      ),
                                    ],
                                  ),
                                ),
                              );
                            },
                            child: Text('Open'));
                      })
                      .toList()
                      .cast(),
                );
              },
            ),

有什么建議么？

Answer 1

請參考以下示例：

StreamBuilder<DocumentSnapshot>(
    stream:  FirebaseFirestore.instance.collection('Decembre').doc(uid).collection('Docs').doc('test').snapshots(),
    builder: (context, snapshot) {
        if (snapshot.hasData) {
        return ListView.builder(
            itemCount: snapshot.data!.docs.length,
            itemBuilder: (context, index) {
                DocumentSnapshot doc = snapshot.data!.docs[index];
                return Column(
                       children:[
                           Text(doc['url'])
                       );
            });
        } else {
        return Text("No data");
        }
    },
)

Answer 2

也許您需要的只是指定QuerySnapshot的類型：

late Stream<DocumentSnapshot<Map<String, dynamic>>> personnalData =  // like this FirebaseFirestore.instance
      .collection('Decembre')
      .doc(uid)
      .collection('Docs')
      .doc('test')
      .snapshots();

因為snapshots()是一種返回Stream<DocumentSnapshot<Map<String, dynamic>>>的方法，並且僅設置Stream<DocumentSnapshot>將被視為不同的類型，從而引發錯誤。

Answer 3

也許你可以試試

 StreamBuilder<DocumentSnapshot<Map<String, dynamic>>>(
              stream: personnalData,
              builder: (BuildContext context,
                  AsyncSnapshot<QuerySnapshot> snapshot) {
                if (snapshot.hasError) {
                  return const Text('Something went wrong');
                }
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return Center(child: CircularProgressIndicator());
                }
                return Stack(
                  children: snapshot.data!.docs
                      .map((DocumentSnapshot document) {
                        Map<String, dynamic> data =
                            document.data()! as Map<String, dynamic>;

                        return PageView.builder(
                                            controller: _controller,
                                            itemCount: 3,
                                            itemBuilder: (context, index) {
                                             
                                              return Container(
                                                child: InteractiveViewer(
                                                  minScale: 0.1,
                                                  maxScale: 4.0,
                                                  child: Image.network(
                                                // FETCH URL FROM DOCUMENT 'TEST'
                                                    width:
                                                        MediaQuery.of(context)
                                                            .size
                                                            .width,
                                                    fit: BoxFit.cover,
                                                    loadingBuilder: (context,
                                                        child,
                                                        loadingProgress) {
                                                      if (loadingProgress ==
                                                          null) {
                                                        return child;
                                                      } else {
                                                        return Center(
                                                          child:
                                                              
                                                   CircularProgressIndicator(),
                                                        );
                                                ),
                                              );
                                            }),
                                      ),
                                    ],
                                  ),
                                ),
                              );
                            },
                            child: Text('Open'));
                      })
                      .toList()
                      .cast(),
                );
              },
            ),

在 streamBuilder 中，您可以像創建 stream 一樣添加 <DocumentSnapshot<Map<String, dynamic>>>。

Answer 4

我找到了解決方案！

問題是我試圖使用StreamBuilder<QuerySnapshot>而不是StreamBuilder<DocumentSnapshot>從DocumentSnapshot獲取數據

這是我解決它的方法：

late Stream<DocumentSnapshot<Map<String, dynamic>>> personnalData =
      FirebaseFirestore.instance
          .collection('Decembre')
          .doc(uid)
          .collection('Docs')
          .doc('test')
          .snapshots();

StreamBuilder<DocumentSnapshot>(
        stream: personnalData,
        builder: (BuildContext context,
              AsyncSnapshot<DocumentSnapshot> snapshot) {
                    if (snapshot.hasData) {  
                        return Text(snapshot.data!['url']);
                    }
                    return CircularProgressIndicator();
        }),

這段代碼對我來說效果很好。 我希望這會幫助別人！