Property 'data' does not exist on type 'unknown'. Property 'datatime' does not exist on type 'unknown'

Question

I am trying to generate a graph with firestore data, I use ng2charts, I do my code but it sends me the following errors. Property 'data' does not exist on type 'unknown'. This gives me an error in item.data

Property 'datatime' does not exist on type 'unknown'. This gives me an error in item.datatime

How to solve it?

This is my component:

  labelsdatatimeArray: any = []; 
  dataArray: any = [];

  @ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined;

  constructor(public navCtrl: NavController, private firestore: AngularFirestore) { }

    ngOnInit() { 
      this.firestore.collection('/ELGeneraciónEmpleosFormalesDiciembreCadaAño/').get().toPromise().then((snapshot) => {
      snapshot.docs.forEach(doc => {
      let item = doc.data();

      let data = item.data;
      this.dataArray.push(data);

      let datatime = item.datatime;
      this.labelsdatatimeArray.push(datatime);
    });
  }); 
  }


  public barChartOptions: ChartConfiguration['options'] = {
    responsive: true,
    
    scales: {
      x: {  ticks: {
        stepSize: 1,
        maxRotation: 60,
        minRotation: 60,
        autoSkip: false
     }},
      y: {
        min: -40
      }
    },
    plugins: {
      legend: {
        display: true,
      },
      datalabels: {
        anchor: 'end',
        align: 'end'
      }
    }
  };
  public barChartType: ChartType = 'bar';
  public barChartPlugins = [
    DataLabelsPlugin
  ];

  public barChartData: ChartData<'bar'> = {
    labels: [this.labelsdatatimeArray],
    datasets: [ 
      { data: [this.dataArray],
        label: '' },
    ]
  };

  // events
  public chartClicked({ event, active }: { event?: ChartEvent, active?: {}[] }): void {
    console.log(event, active);
  }

  public chartHovered({ event, active }: { event?: ChartEvent, active?: {}[] }): void {
    console.log(event, active);
  }

Answer 1

If the item is inferred as an unknown value, its good to add type-checks instead of using any to avoid compilation errors.

You can use the following type guards:

let item = doc.data(); // assuming item is unknown

// In the following code I dont know what is the type of the data in your case
// so you can declare a specific type that you are expecting instead of any
let data =
  item && typeof item === "object" && "data" in item
    ? (item! as { data: any /** Use specific type here */ }).data
    : null; 

if(!data){
    // handle null data
    // However, if you sure you will get a value in data then no need to add this if check
}

// same for datetime
let datetime =
  item && typeof item === "object" && "datetime" in item
    ? (item! as { datetime: any }).datetime
    : null;

if(!datetime){
    // handle null datetime
    // However, if you sure you will get a value in datetime then no need to add this if check
}