The parameter type ‘DocumentData’ cannot be assigned to type ‘never’ in this argument

I've been struggling to find a solution to my issue: Ts gives me an error:

 Argument of type 'DocumentData' is not assignable to parameter of type 'never'

I attempted the solution I found on this page: Argument of type 'DocumentData | undefined' is not assignable to parameter of type 'DocumentData'

but it doesn't seem to be working.

Here is my function:

async viewPost (post: { id?: unknown }) {
 const allCommentaires = await commentsCollection.where('postId', '==', post.id).get()
 if (allCommentaires) {
  allCommentaires.forEach(data => {
    const commentaires = data.data()
    commentaires.id = data.id
    if (commentaires !== undefined) {
      this.postComments.push(commentaires)
    }
  })
}
this.fullPost = post
this.showPostModal = true}

The error occurs at this line:

this.postComments.push(commentaires)

"commentaires" is underlined with the same error mentioned above.

Can anyone offer assistance?

typescriptfirebasevue.js

Answer №1

It's unusual that the solution you referenced didn't yield results in your case, but one potential approach could be to confirm the type using the as keyword.

Furthermore, consider relocating the data id assignment within the if statement to avoid encountering the runtime error 

Cannot set property 'id' of undefined
:

if (comments) {
  comments.id = data.id;
  this.commentPosts.push(comments as DocumentData);
}

Answer №2

After some research, I have found a solution to the issue. Below is the updated code:

 async viewPost ({ state, commit }, post: { id?: any }): Promise<void> {
  const postComments: firebase.firestore.DocumentData[] = []
  const allCommentaires = await commentsCollection.where('postId', '==', post.id).get()
  if (allCommentaires) {
    allCommentaires.forEach(data => {
      const commentaires = data.data()
      commentaires.id = data.id
      if (commentaires !== undefined) {
        postComments.push(commentaires)
      }
    })
  }
},

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

Troubles encountered when populating the array within a Vue component

I am experiencing an issue with my ProductCard component where the addItem method is not successfully adding a new item to the array. <template> <div class="card"> <div v-for="item in TodoItems" :key="item.id ...

javascriptvue.js

What is the best way to define the type of an object when the Key is already known?

If I have the code snippet below, how can I properly define the data object type based on the known value of data.type? In this scenario, I aim to assign a specific type to data when its type property is either "sms" or "email" const payload = '{&quo ...

typescript

ESLint encountering a "Module path unresolved" issue in conjunction with SAM Serverless Monorepo

In the process of developing a basic Hello World function for AWS Lambda/APIGateway, I aim to integrate ESLint and Typescript features. Typically, when working with Typescript and ESlint, inclusion of the eslint-plugin-import package and specifying the ext ...

typescripteslintserverlesstypescript-eslint

Generating an instance of an enum using a string in Typescript

Having trouble accessing the enum members of a numeric enum in TypeScript using window[name]. The result is an undefined object. export enum MyEnum { MemberOne = 0, MemberTwo = 1 } export class ObjectUtils { public static GetEnumMembers(name ...

javascripttypescriptenums

How can we verify that console.log has been called with a specific subset of expected values using Jest?

I am currently experimenting with a function that adds logging and timing functionality to any function passed to it. However, I am facing a challenge when trying to test the timing aspect of it. Here are my functions: //utils.js export const util_sum = ( ...

javascripttypescriptunit-testingvue.jsjestjs

Aligning Description Item components horizontally in antdLearn how to easily horizontally align Description

Currently, I am utilizing the `antd` Description components. In this scenario, when there is no `title` for the items, the value should be aligned to the left. You can see an example of this alignment in the image below: https://i.sstatic.net/Ah70f.png I ...

javascriptcssreactjstypescriptantd

Creating a Redis client in Typescript using the `redis.createClient()` function

I'm currently trying to integrate Redis (v4.0.1) into my Express server using TypeScript, but I've encountered a small issue. As I am still in the process of learning TypeScript, I keep getting red underline errors on the host parameter within th ...

node.jstypescriptexpressredisnode-redis

Executing functions in Vue TypeScript during initialization, creation, or mounting stages

Just a few hours ago, I kicked off my Vue TypeScript project. I've successfully configured eslint and tslint rules to format the code as desired, which has left me quite pleased. Now, I'm curious about how to utilize the created/mounted lifecycl ...

typescriptvue.js

Error message: "Vue.js is throwing an error because it cannot find the property 'use' as it is

I am currently working on incorporating a Datatable plugin into my Vue application from this source: https://www.npmjs.com/package/vuejs-datatable. However, I am encountering an error in my console. Uncaught TypeError: Cannot read property 'use' ...

vue.jsdatatablesvuejs2vue-component

Vue framework fails to recognize the spread operator when used with WebPack

The code snippet below was recommended in this particular answer. import { mapActions } from 'vuex' export default { vuex: { getters: { activeDataRow: state => state.activeDataRow }, actions: { updateData, resetData } }, methods: ...

webpackecmascript-6babeljsvue.js

Transform object into data transfer object

Looking for the most efficient method to convert a NestJS entity object to a DTO. Assuming the following setup: import { IsString, IsNumber, IsBoolean } from 'class-validator'; import { Exclude } from 'class-transformer'; export clas ...

node.jstypescriptnestjs

Unable to find solutions for all parameters needed by a CustomComponent within Angular

Whenever I attempt to compile the project for production, an error pops up: There is a problem resolving all parameters for EmployeeComponent in C:/.../src/app/employee/employee.component.ts: (?, ?, ?). Oddly enough, when I run the application, every ...

angulartypescript

What is the process for integrating the node-menu package into my project without utilizing the require statement?

Is there a way to incorporate node-menu into my TypeScript project without using require, like this: const menu = require('node-menu'); Whenever I attempt to import node-menu into my project, I encounter the following errors: ...

javascriptnode.jstypescriptnpmnode-modules

Exporting an angular component as a module

I have successfully created a widget using Angular elements that works well in HTML. However, I am unsure of how to export it as a module for use in other Angular, React, Vue web applications. I want to be able to import import { acmaModule } from package- ...

javascriptangulartypescript

Issue with Angular 4 Routing: Links are opening in new window instead of within router-outlet

I am currently facing an issue while trying to display the SuburbDataComponent HTML on the DASHBOARD-SIDE-PANEL-COMPONENT.HTML. When I click on Dashboard, it opens a new window but only displays the SuburbDataComponent.html without showing the side panel ...

angulartypescriptroutes

Managing the rxjs from an Array of observables when the array has no elements

Looking for a more elegant solution to handle the case where an array of observables is empty in the following TypeScript function. I want the observable to complete when subscribe() is called without the need for an initial check. I've already imple ...

typescriptrxjs

Storing Buffer data in Postgres bytea using TypeORM is limited to only 10 bytes

I am encountering an issue while trying to store images in a postgres database, as only 10 bytes of data are being saved. Here is the sequence of events: Initially, I receive a base64 encoded string on my server. I then convert it into a Buffer, assign i ...

node.jspostgresqltypescriptnestjstypeorm

In Vue JS, ensure that each item is loaded only after the previous item has finished loading

Is there a way to optimize the loading of around 1000 static images, .gifs, and videos for an online slideshow presentation? Currently, all items are loading simultaneously causing viewers to wait to see the first item. How can each item be loaded after th ...

javascriptperformancevue.jsvuetify.jspreload

Tips for dragging a column in ngx-datatable to scroll the horizontal scroll bar in Angular 4

Is there a way to make the horizontal scroll bar move when dragging the column header of ngx-datatable in Angular 4? I have a situation where the first column should trigger the movement of the horizontal scroll bar when dragged from left to right. Any s ...

angulartypescriptngx-datatable

What is the best way to adjust the Material Drawer width in Reactjs to match the width of its children?

Currently, I am utilizing the Material-ui Drawer component to toggle the display of content on the right side of the screen. The functionality I am aiming for is that when the Drawer opens, it will shrink the existing content on the right without any overl ...

cssreactjstypescriptmaterial-uidrawer