steps for setting up firestore database

Hey there, I'm trying to retrieve data from Firestore within a cloud function. To initialize Firebase, I have a file called firebase.ts:

import * as admin from "firebase-admin";
import { getFirestore } from "firebase-admin/firestore";
import * as functions from "firebase-functions";
import { initializeApp } from "firebase/app";
admin.initializeApp({
  credential: admin.credential.cert({
  privateKey: functions.config().private.key.replace(/\\n/g, "\n"),
  projectId: functions.config().project.id,
  clientEmail: functions.config().client.email,
}),
databaseURL: `https://${functions.config().project.id}.firebaseio.com`,
});

  const app = initializeApp({
  appId:functions.config().app.id

})
const db = getFirestore();
const realtime = admin.database();
export {admin, db, realtime};

Then, in my index.ts file, I use the following:

const ref = doc(db, "users", uid);

The issue I'm encountering is that Visual Studio Code is giving me an error for 'db' inside 'doc':

No overload matches this calls. Argument of type 'Firestore' is not assignable to parameter of type 'DocumentReference<unknown, DocumentData>'. Type 'Firestore' is missing the following properties from type 'DocumentReference<unknown, DocumentData>': converter, type, firestore, id, and 3 more.

I have followed the official documentation at https://firebase.google.com/docs/firestore/query-data/get-data and https://blog.logrocket.com/building-rest-api-firebase-cloud-functions-typescript-firestore/, but nothing seems to work. It could be a configuration problem, but I'm not sure. Appreciate any help. Thank you.

Answer №1

It is important to note that firebase-admin should not be used in web client code. This library is not designed for browser use and is meant to be utilized only in nodejs environments. For frontend operations, stick to the client APIs and refrain from incorporating firebase-admin in your Angular project. If you intend to trigger an HTTP type cloud function from the frontend, simply send a regular HTTP request to the assigned endpoint after deployment.

Furthermore, Firebase web client SDKs are not suitable for backend tasks. Save firebase-admin for backend functionalities exclusively. Attempting to blend the two will lead to failure since they operate differently and offer distinct APIs. When crafting Cloud Function code, do away with the client SDK (firebase/app) and rely solely on firebase-admin. To initialize firebase-admin in Cloud Functions, refer to the documentation. The following code snippet is all that is required:

const { initializeApp } = require('firebase-admin/app');
initializeApp()

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

You cannot have an attribute list in this location, error message in firebase-ios-sdk for Xcode 15.0

After updating my Xcode to version 15.0, I encountered an error that reads: ABSL_CONST_INIT extern "C" const int64_t kFIRFirestoreCacheSizeUnlimited = Settings::CacheSizeUnlimited; // An attribute list cannot appear here I searche ...

Using TypeScript without specifying a specific argument in the any type

My function accesses local/session storage, but there is a condition that it can only be called if the window is defined. This function takes a generic args argument which I simplified to have a type of any[]. While using the useSessionStorage function, ...

Encountering an error when trying to set data in a Firestore document with a customized JavaScript object: "Invalid data provided for function DocumentReference.set()"

For my initial project, I need help in identifying where the issue lies. Firstly, I have a function that adds data to Firebase: addpost() { let newposts = new Posts( this.addForm.value ) this.postsservice.addPosts(newposts); } Ne ...

Leverage classes from a CommonJS module within a Typescript environment

I am facing an issue with my npm package setup. Here is a snippet from one of the files: 'use strict' module.exports = class TModel { constructor (app) { this.app = app } static schema () { } } I am trying to incorporate this int ...

Guide on showing a component exclusively for iPads with React and TypeScript

I need help displaying an icon only in the component for iPad devices, and not on other devices. As a beginner in coding for iPads and mobile devices, I am unsure how to achieve this specific requirement for the iPad device. Below is the code snippet tha ...

Ways to broaden React categories for embracing html attributes as props?

When designing a component that accepts both custom props and HTML attribute props, what is the best approach for creating the interface? The ideal interface should also accommodate React-specific HTML props, such as using className instead of class. Here ...

Having difficulty using the Angular 6 "generic type elementref requires 2 type arguments" error message in my code

When attempting to use ElementRef, I included the following import statement: import { Component, OnInit, ElementRef, ViewChild } from '@angular/core'; I followed the examples and injected it into the constructor as shown: constructor(private ...

Having difficulty generating an Angular 5 Universal server application bundle with @ngtools/webpack

I am currently working on developing a cross-platform app using Angular 5 and WebPack without utilizing the CLI. The main issue I am facing is that I am unable to get the express application to function properly, resulting in encountering the following er ...

Displaying JSON Object in Kendo UI Grid with Incorrect Format

I encountered an issue where a function that I passed to a Kendo Grid field in the fetch method returns perfectly on console.log, but only [object Object] is returned in the Kendo Grid display. Here's the background: I am utilizing two services - Rev ...

Revoking TypeScript Compilation Files with Sublime Text

By mistake, I pressed CTRL + B and it created JavaScript files and source map files from Typescript. Is there a simple way to reverse this process? Sublime keeps generating/updating the JS files whenever I make changes to the Typescript files. My current ...

When all the checkboxes have been checked and then one is unchecked, a row is consequently removed

In my Angular table, I have a checkbox column. When I check all checkboxes, they all get checked as expected. Similarly, when I uncheck all checkboxes, they all get unchecked properly. If I check just one checkbox, only that particular one gets checked, ...

I'm curious if there's a method to ensure that the content within a mat-card stays responsive

So I'm working with this mat-card: <mat-card> <mat-card-content> <div *ngFor="let siteSource of siteSources | paginate: { itemsPerPage: 5, currentPage: page};"> <site-details [site]='siteSource'></s ...

Angular: The object cannot be extended to add the property resumeBootstrap

I encountered an issue with my upgrade / hybrid AngularJS / Angular 2 application where an error message appeared: Unhandled Promise rejection: Cannot add property resumeBootstrap, object is not extensible ; Zone: ; Task: Promise.then ; Value: Type ...

The value in reactive forms is represented as an object containing the key "value" with the corresponding value of "therealname", instead of just being the string "therealname"

Snippet Example: <div>name: {{fg.get('name').value | json}}</div> When I set up the reactive form with #1 this code snippet: this.fg = this.fb.group({name: "myname"}); The result in the div is, name: myname #2 However, using e ...

Each styled component will yield the respective type definitions using (@types/styled-components)

Encountering a strange problem with styled-components in VSCode. Every component from styled-components is returning 'any'. https://i.sstatic.net/0kFJw.png https://i.sstatic.net/S20cS.png I had it working previously, but unsure when it stopped ...

Navigating through nested data in React TypeScript can be accomplished by accessing the nested data

How can data in a nested interface like the one shown below be accessed in React TypeScript? export interface School { prices: Array<{ state: { response_header?: { school_type_opportunities?: Array<{ benefit_type_opportunity?: st ...

What is the process of invoking a service from a controller?

In my MovieSearchCtrl controller class, I have a method called returnMovies(query) that looks like this: returnMovies(query): any { return MovieSeat.MovieSearchService.getMovies(query); } Within the MovieSearchService service class, there is a functi ...

What is the method to retrieve the unique individual IDs and count the number of passes and fails from an array

Given a data array with IDs and Pass/Fail statuses, I am looking to create a new array in Angular 6 that displays the unique IDs along with the count of individual Pass/Fail occurrences. [ {"id":"2","status":"Passed"}, {"id":"5","status":"Passed"}, {"id": ...

Storing dates using Angular 2 and JSON for efficient data management

I've encountered a challenging issue with my Angular 2 application. I'm attempting to organize my API (MongoDB) in such a way that each new "post" added by the admin can be retrieved by date (not time) on the front end. Here's an example of ...

Easiest method for securing a web page with a password using Angular Material

Seeking guidance on how to implement password protection for a web page. I used angular material to develop a webpage that communicates with a back-end service to retrieve information. Additionally, I've included an admin sub-page for website configur ...