AngularFirestore: It seems that the 'id' property is not available on the 'QueryDocumentSnapshot<any>' type

Encountering a challenge with Angular5 and Firestore

My Objective

  • Retrieve a Firestore Collection named minutes

  • Assign the content of the collection to my component variable, also named minutes, as an Observable object containing the ID of each minute document.

Currently facing the following error

Property 'id' does not exist on type 'QueryDocumentSnapshot<any>'

This is my code for extracting the collection from Firestore

minutesArray: AngularFirestoreCollection<any>;
minutes: Observable<any[]>;

constructor(private afs: AngularFirestore) {
  this.minutesArray = afs.collection<any>('minutes', ref => ref.orderBy('year', 'desc'));
  this.minutes = this.minutesArray
                   .snapshotChanges()
                   .pipe(map(actions => actions.map(a => {
                       const data = a.payload.doc.data();
                       #### NEXT LINE ERRORS OUT ####
                       const id = a.payload.doc.id;
                       return { id, ...data };
                     }))
                   );

Seeking insights on why this error is occurring

No solutions were found in this Github Issue

`

Answer №1

Consider utilizing:

doc.payload.doc['id']

As a substitute for:

doc.payload.doc.id

Answer №2

By setting allowSyntheticDefaultImports to true in the tsconfig.json file, I was able to solve the problem I was facing.

"allowSyntheticDefaultImports": true

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

Relationship between multiple entities with a row representing the quantity involved

For one of my classes, I need to create a minimal database scenario. The task involves setting up a portfolio and storing the amount of coins within it. So far, I've created tables for coins and portfolios. Each portfolio can contain multiple coins, ...

Is Highcharts-angular (Highcharts wrapper for Angular) compatible with Angular 4?

I have attempted to install various versions of highcharts-angular, ranging from 2.0.0 to 2.10.0. However, I consistently encounter the same error when running the application. The error message states: Metadata version mismatch for module C:/dev/Angular- ...

Enable the Angular button only when the radio button has been selected

Just starting out with Angular and I have a query. This is a scenario for my project at work. https://i.stack.imgur.com/R3SxA.png In this screenshot, I want to enable the "ajouter" button when at least one radio button is selected in the secure chest (s ...

The TS-Mocha and Chai duo have encountered a hitch: a peculiar error message, TS2695, informing them that the left side of the

Software Versions: "ts-mocha": "^8.0.0", "ts-node": "^10.3.0", "chai": "^4.3.4", Sample Code: expect(wrapper.find(MyListItem)).to.have.length(3); Execution Command: ts-mocha tests/**/*.tsx -r u ...

return to the original secured page based on the most recent language preference

I'm facing an issue with a logical redirection that needs to redirect users to the previous protected page after login. The login functionality is implemented using my custom login page and Google Credentials. Additionally, I have set up a multilingu ...

Currently in the process of creating a carousel displaying images, I have encountered an issue stating: "An optional property access cannot be on the left-hand side of an assignment expression."

I am currently working on an Angular Image Carousel that utilizes a model to iterate through the images. However, I am encountering an error when attempting to access the first position. An error message stating "The left-hand side of an assignment expres ...

Generating Dynamic DIV Elements in Angular 2

I am looking to dynamically generate divs in Angular 2 with Bootstrap classes based on data retrieved from a database. For instance, if I receive 6 categories from the database, I would like to display this as 3 rows with 2 columns each. How can I implemen ...

Angular: Excessive mat-menu items causing overflow beyond the page's boundaries

Within my mat-menu, there is a div for each mat-menu item. The number of items varies depending on the data retrieved. However, I noticed that when there are more items than can fit in the menu, it extends beyond the boundaries of the mat-menu instead of ...

Tips for incorporating a versatile arrow function as an interface property in Typescript within React JSX

I'm in the process of creating an interface PromptInput { key: string, title: string, customInput?: <T>(value: T, onChange: (newValue: T) => void) => React.ReactNode; } I need the types of value and newValue to match, but they can b ...

Mocking Firestore v9 getDocs() in Jest: A Comprehensive Guide

After upgrading our webapp from Firebase v8 to v9, we encountered various issues due to the new syntax. As I am still relatively new to Jest and Firebase/Firestore, not everything is completely clear to me yet ... I am attempting to mock getDocs from fire ...

When utilizing an object as state in React, the `setState` function will only set

Currently, I am working on developing a React form that utilizes a custom Input component which I have created multiple times. The objective is to gather all the names and values from the form in the parent component: {inputName: value, inputName2: valu ...

Angular Bootstrap: How to Resolve the Error "Function $(...).collapse() is Undefined"

I'm a beginner with Bootstrap and I'm attempting to trigger the .collapse() function using JavaScript within an Angular controller when a user clicks on a link. The goal is to close the collapsible navbar when a link is clicked, as the routing in ...

What is the best way to extract an object from an array that only includes one element, and that element is an object?

Here is the output of my updated function: db.collection('SOCIAL').get().then((snapshot) =>{ snapshot.docs.forEach(doc => { tempData.push(doc.data()) }) return tempData }) I want to store these valu ...

Alternative to bower_concat for NPM

bower_concat is an amazing tool. Simply add a bower package using: bower install something --save Then bower_concat will gather the javascript and CSS from that package and combine it into a bundle, resulting in vendor.js and vendor.css files that can be ...

The 'api' property is not found within the 'MyService' type declaration

Currently, I am working on a tutorial where we are building an Angular service to send emails from a form using the Mailthis Email API. In the code for the service, I encountered an error related to the 'api' variable that states "Property ' ...

Exploring the Functionality of HTML Anchor Link Fragment within Angular 6

I've been working on an Angular 6 project where I've disabled the hash-location-strategy, removing # from the URL. As a result of this change, a link like: <li routerLinkActive="active"> <a [routerLink]="['/settin ...

Show a blank space if there is no data returned from the backend

My scenario involves using an HTTP service to retrieve data from the backend for display in a Material field on the frontend. controller.ts import { Job } from '../models/job.model'; //this is my interface model export class JobComponent { ...

An issue has been encountered: No NgModule metadata was discovered for 'AppModule' in the ngx-rocket Metronic theme

Task List [ ] Initialize [x] Build [x] Serve [ ] Test [ ] End-to-End test [ ] Generate [ ] Add [ ] Update [ ] Lint [ ] Internationalization [ ] Run [ ] Configure [ ] Help [ ] Version [ ] Documentation Is this a regression? This issue started occurring ...

A step-by-step guide on sending a fetch request to TinyURL

I have been attempting to send a post request using fetch to tinyURL in order to shorten a URL that is generated on my website. The following code shows how I am currently writing the script, however, it seems like it's not returning the shortened URL ...

Utilizing lodash and Angular 8: Identifying an valid array index then verifying with an if statement

In my current project, I am developing an e-commerce angular application that includes a basket with two types of products: restaurant + show combos and gift cards. When a client reserves a restaurant, they must also reserve a show; conversely, the client ...