Firestore WebChannelConnection RPC 'Listen' 400错误排查求助

问题概述 #

使用Firebase Web SDK从Firestore获取数据时，仅Web平台出现WebChannelConnection RPC 'Listen' 400 Bad Request错误，已排查代码、Firestore安全规则及CORS配置，问题仍未解决。

错误详情 #

Error: [2023-08-11T01:10:26.900Z] @firebase/firestore: Firestore (9.22.1): WebChannelConnection RPC 'Listen' stream 0x73ac5adc transport errored:

相关代码 #

FutureBuilder<User?>(
  future: Provider.of(context)!.auth.getCurrentUser(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      return displayUserInformation(context, snapshot.data);
    } else {
      return Center(child: CircularProgressIndicator());
    }
  },
),

StreamBuilder<DocumentSnapshot>(
  stream: FirebaseFirestore.instance
      .collection('users')
      .doc(FirebaseAuth.instance.currentUser!.uid)
      .snapshots(),

  builder: (context, snapshot) {
    if (!snapshot.hasData) {
      return Center(child: CircularProgressIndicator());
    } else {
      final data = snapshot.data?.data() as Map<String, dynamic>?;

      if (data != null && data.containsKey('gallery')) {
        List<String> imageList = List<String>.from(data['gallery']);

        return Padding(
          padding: EdgeInsets.symmetric(horizontal: 15),
          child: StaggeredGridView.countBuilder(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            crossAxisCount: 2,
            mainAxisSpacing: 8.0,
            crossAxisSpacing: 8.0,
            itemCount: imageList.length,
            itemBuilder: (BuildContext context, int index) {
              double aspectRatio = determineAspectRatio(imageList[index]);
              return GestureDetector(
                onTap: () {
                  deletePicture(context, imageList[index]);
                },

                child: ClipRRect(
                  borderRadius: BorderRadius.circular(8.0),
                  child: Container(
                    decoration: BoxDecoration(
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black.withOpacity(0.2),
                          blurRadius: 8.0,
                          spreadRadius: 2.0,
                          offset: Offset(0, 2),
                        ),
                      ],
                    ),

                    child: Image.network(
                      imageList[index],
                      fit: BoxFit.cover,
                      errorBuilder: (context, error, stackTrace) {
                        return Container(color: Colors.grey);
                      },
                    ),
                  ),
                ),
              );
            },

            staggeredTileBuilder: (int index) => StaggeredTile.fit(1),
          ),
        );
      } else {
        return Container();
      }
    }
  },
),




  Widget displayUserInformation(BuildContext context, User? user) {
  return SingleChildScrollView(
  child: Container(
  alignment: Alignment.center,
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      SizedBox(height: 10),
      StreamBuilder<DocumentSnapshot<Map<String, dynamic>>>(
        stream: FirebaseFirestore.instance.collection('users').doc(user?.uid).snapshots(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final active = snapshot.data!.data()?['story'] ?? 'anonymous';
            final mission = snapshot.data!.data()?['mission'] ?? 'anonymous';
            final based = snapshot.data!.data()?['based'] ?? 'anonymous';
            final profession = snapshot.data!.data()?['profression'] ?? 'anonymous';
            final userName = snapshot.data!.data()?['userName'] ?? 'anonymous';
            final profilePicUrl = snapshot.data!.data()?['profile_pic'];

            return Container(
              width: double.infinity,
              padding: EdgeInsets.all(16),
              margin: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  CircleAvatar(
                    backgroundImage: NetworkImage(profilePicUrl ?? ''),
                    radius: 50,
                  ),
                  SizedBox(width: 16),
                  Flexible(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        SizedBox(height: 10),
                        Text(
                          '$userName',
                          style: TextStyle(
                            fontSize: 18,
                            color: Color.fromARGB(255, 109, 133, 23),
                            fontWeight: FontWeight.bold,
                          ),
                        ),

已检查配置项 #

Firestore安全规则 #

rules_version = '2';service cloud.firestore {match /databases/{database}/documents {match /{document=**} {allow read, write: if request.auth != null;}

Cloud Storage的CORS配置 #

[{"maxAgeSeconds": 3600, "method": ["GET", "HEAD"], "origin": ["*"], "responseHeader": ["Content-Type"]]}

排查方向 #

• Auth状态异步问题：代码中直接使用FirebaseAuth.instance.currentUser!.uid存在空指针风险，需确保Auth状态完全初始化后再发起Firestore请求，可将StreamBuilder依赖于Auth状态流而非同步值。
• SDK版本兼容性：当前使用Firestore 9.22.1，尝试升级至最新稳定版，排查版本已知bug。
• Web平台限制：检查浏览器是否启用广告拦截、隐私类插件，这类工具可能阻断Firestore的WebSocket连接；同时确认网站是否使用HTTPS（Firestore在非HTTPS环境下功能受限）。
• 数据结构异常：检查users集合对应文档的gallery字段格式是否正确（如是否为合法数组），格式错误可能导致监听流解析失败。
• 初始化配置：确认Web平台的Firebase初始化参数（项目ID、API密钥等）与控制台完全一致。

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