snapshot.val() returning null in build deploy in Vercel & Firebase Realtime Database

Question

I am making a blog application in Next.js, Firebase Realtime Database & Vercel for hosting. When i run it on my local machine, everything works perfectly, i get back all data from Firebase, even when i run npm run build on my local machine, everything goes on like clockwork, but when in production i deploy it to netlify, the snapshot.val() function in Firebase Realtime Database, always returns a null value, however when i log the snapshot object, i get a proper console.log with the DataSnapshot & its values.

I am making a blog application in Next.js, Firebase & Vercel for hosting. When i run it on my local machine, everything works perfectly, i get back all data from Firebase, even when i run npm run build on my local machine, everything goes on like clockwork, but when in production i deploy it to netlify, the snapshot.val() function in firebase, always returns a null value, however when i log the snapshot object, i get a proper console.log as follows on both the dev & prod console:

DataSnapshot {
  _node: ChildrenNode {
    children_: SortedMap {
      comparator_: [Function: NAME_COMPARATOR],
      root_: LLRBEmptyNode {}
    },
    priorityNode_: null,
    indexMap_: IndexMap { indexes_: [Object], indexSet_: [Object] },
    lazyHash_: null
  },
  ref: ReferenceImpl {
    _repo: Repo {
      repoInfo_: [RepoInfo],
      forceRestClient_: false,
      authTokenProvider_: [FirebaseAuthTokenProvider],
      appCheckProvider_: [AppCheckTokenProvider],
      dataUpdateCount: 0,
      statsListener_: null,
      eventQueue_: [EventQueue],
      nextWriteId_: 1,
      interceptServerDataCallback_: null,
      onDisconnect_: [Object],
      transactionQueueTree_: [Tree],
      persistentConnection_: [PersistentConnection],
      key: 'https://blog-2ba4f-default-rtdb.firebaseio.com/',
      stats_: [StatsCollection],
      server_: [PersistentConnection],
      statsReporter_: [StatsReporter],
      infoData_: [SnapshotHolder],
      infoSyncTree_: [SyncTree],
      serverSyncTree_: [SyncTree]
    },
    _path: Path { pieces_: [Array], pieceNum_: 0 },
    _queryParams: QueryParams {
      limitSet_: false,
      startSet_: false,
      startNameSet_: false,
      startAfterSet_: false,
      endSet_: false,
      endNameSet_: false,
      endBeforeSet_: false,
      limit_: 0,
      viewFrom_: '',
      indexStartValue_: null,
      indexStartName_: '',
      indexEndValue_: null,
      indexEndName_: '',
      index_: PriorityIndex {}
    },
    _orderByCalled: false
  },
  _index: PriorityIndex {}
}

This null returned value is not going away, no matter what i try and whichever solutions I found online, and honestly, without proper db return values,the whole app is useless.

Here are some basic facts:

• That snapshot is loaded correctly and is being logged as console.log(snapshot) in the environment.

• The snapshot does contain data, as proven in the proper execution and logging, on my local machine.

• There isn't an issue with the code logic. The code logic is correct and that there are no bugs or errors in the code that could be causing the issue.

• It isn't a permission issue. The read permission rule is already set to true in the Firebase Realtime Database.

Any help is appreciated, i have been stuck on this for 2 days.

Answer 1

Firebase returns a snapshot object as a query result even when there is no data.
Try to check whether the result is empty by logging console.log(snapshot.exists()).

Probably there is some difference between Dev and Prod environment. Check manually Prod database by exporting it to a JSON file.