无法访问 Cloud Firestore 后端。连接失败1次

Question

我正在使用一个非常简单的代码并从 firestore 获取数据

import firebase from 'firebase/app';
import 'firebase/firestore'

const firebaseApp = firebase.initializeApp({
        apiKey: "...",
        authDomain: "...",
        ....
    });
    
const db = firebaseApp.firestore();
    
export default db;

但我不断收到此错误

[2021-06-05T00:58:41.274Z]  @firebase/firestore: Firestore (8.6.5): Could not reach Cloud Firestore backend. Connection failed 1 times.
Most recent error: FirebaseError: [code=permission-denied]:
 Permission denied on resource project.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

1. 我的互联网连接速度非常快
2. 我的时钟也与标准时间同步

现在，我不知道为什么会发生这种情况？

请有人帮助我！

Answer 1

我也面临着同样的问题。该连接在某些环境中可以正常工作，但在我客户的公司网络上却不能。

在互联网上进行了长时间的研究后，我发现Github 上有一个问题正在谈论它。

这对我有用：

const firestoreDB = initializeFirestore(firebaseApp, {
  experimentalForceLongPolling: true, // this line
  useFetchStreams: false, // and this line
})

这里我使用的是firebase v9。对于 firebase v8 来说是这样的：

firebase().firestore().settings({
  experimentalForceLongPolling: true, // this line
  useFetchStreams: false, // and this line
})

Answer 2

我能够通过直接使用我的凭据来解决这个问题，我在initializeApp我的firebase配置中，我之前从我的env文件中调用它们，我认为我的应用程序之前没有获取env

Answer 3

确保您的环境指向真正的 Firestone 数据库，而不是 Firestore 模拟器。当我遇到同样的问题时，这就是原因。

我使用的是 Angular 框架，因此我必须在 app.module.ts 文件中注释掉这些环境引用。

@NgModule({
  declarations: [AppComponent, InformUserComponent],
  entryComponents: [InformUserComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AppRoutingModule,
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production,
      // Register the ServiceWorker as soon as the app is stable
      // or after 30 seconds (whichever comes first).
      registrationStrategy: 'registerWhenStable:30000'
    }),

  ],
  providers: [AuthService, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    // {
    //   provide: USE_FIRESTORE_EMULATOR, useValue: environment.useEmulators ?
    //     ['localhost', 8080] : undefined
    // },
    // {
    //   provide: USE_FUNCTIONS_EMULATOR, useValue: environment.useEmulators ?
    //     ['localhost', 5001] : undefined
    // },
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

Answer 4

我遇到了同样的问题，并尝试使用@atunde raisekola 方法。如果您可以通过在

firebaseConfig

变量中使用直接凭据来解决此问题，请考虑检查您的

.env.local

或您正在使用的任何其他

.env

是否位于根目录中。就我而言，

firebaseConfig.ts

和

.env.local

在同一目录中，因此发生了错误。建议在您的应用程序根目录中包含

.env

。

Answer 5

对于将 Next 13 与 Firestore 9 一起使用的用户：

如果您使用 ServerComponents（Next 13 中的默认组件）并且还使用

.env.local

设置 Firebase 环境变量，那么无论您如何称呼环境变量，一切都应该正常工作。

但您很可能希望通过在文件顶部写入

'use client'

将与 Firestore 数据获取（尤其是实时 onSnapshot）相关的组件转换为 ClientComponent，以便您可以访问状态。在这种情况下，您必须记住在每个环境变量之前添加

NEXT_PUBLIC_

（例如

NEXT_PUBLIC_FIREBASE_API_KEY

）。这会将环境变量公开给浏览器（即客户端）。

另外，请确保环境变量名称中没有任何拼写错误。

链接：

• https://nextjs.org/docs/getting-started/react-essentials#server-components
• https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#exusing-environment-variables-to-the-browser

Answer 6

我在角火方面也遇到过这个问题。 我所做的更改是将 firestore 设置添加到应用程序模块的提供者中：

根据 GitHub issues 的讨论，我认为你可以先尝试

experimentalAutoDetectLongPolling

。 除了使用非常旧的浏览器版本的用户之外，选项

useFetchStreams

是不必要的。

import { SETTINGS as FIRESTORE_SETTINGS } from '@angular/fire/firestore';


providers:[
    {
      provide: FIRESTORE_SETTINGS,
      useValue: { experimentalAutoDetectLongPolling: true, merge: true },
    }
]

您可以使用 mitmproxy 重现 firebase 错误。

Answer 7

我遇到了同样的问题，因为我忘记将这些配置公开给浏览器。这样，如果您使用的是 Next.js。并在

.env

中定义它们，您必须添加

NEXT_PUBLIC

前缀。否则，您将看到相同的错误。 https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#exusing-environment-variables-to-the-browser

Answer 8

如果您的 Firestore 处于测试生产状态，请删除时间戳

allow read, write;

替换上面的代码，希望它能起作用。