Lightning Web Component - lightning-datatable is not rendering data even data has a value

Question

lightning-datatable has a simple data display task, but it is not working as expected. here is my html file

 <template>
    <lightning-card title="Contact List"> 
        <lightning-datatable key-field="Id" data={data} columns={columns}>
        </lightning-datatable> 
    </lightning-card> 
</template>

and the javascript

import { LightningElement, wire, track, api } from 'lwc';
import ACCOUNTRECORDID from '@salesforce/messageChannel/accountRecordId__c';
import { subscribe, unsubscribe, MessageContext } from 'lightning/messageService'; 
import getContacts from '@salesforce/apex/UserService.getContacts';
import FIRSTNAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LASTNAME_FIELD from '@salesforce/schema/Contact.LastName';
import PHONE_FIELD from '@salesforce/schema/Contact.Phone';
import EMAIL_FIELD from '@salesforce/schema/Contact.Email';

const columns = [
    { label: 'First Name', fieldName: FIRSTNAME_FIELD },
    { label: 'Last Name', fieldName: LASTNAME_FIELD },
    { label: 'Phone', fieldName: PHONE_FIELD, type: 'phone' },
    { label: 'Email', fieldName: EMAIL_FIELD, type: 'email' },

];

export default class ContactAccountListSubscriber extends LightningElement {

    subscription = null;
    columns = columns;
    @track data = [];

    @wire(MessageContext)
    messageContext;


    connectedCallback() {
        this.subscribeToMessageChannel();
    }
    handleMessage(message) {

        let accountNameValue = message.accountName;
        getContacts({ accountName: accountNameValue })
            .then(result => {
                this.data = result;
            })
            .catch(error => {
                this.error = true;
            });
    }

    subscribeToMessageChannel() {
        if (!this.subscription) {
            this.subscription = subscribe(this.messageContext, ACCOUNTRECORDID, (message) => this.handleMessage(message))
        } else {
            console.log("using known subscription")
        }
    } 
}

when I print the same with in template content from data will be rendered but not in lightning:datatable. Any help is apprecaited.

<template for:each={data} for:item="contact">
                <p key={contact.Id}>{contact.FirstName}</p>
                <p key={contact.Id}>{contact.LastName}</p>
                <p key={contact.Id}>{contact.Email}</p>
                <p key={contact.Id}>{contact.Phone}</p>
            </template>

Answer 1

The imported field schemas are objects and not strings, but the Lightning-datatable expects the field names to be strings. Unlike the record form, it does not accept both string and schema objects.

Example The import import FIRSTNAME_FIELD from '@salesforce/schema/Contact.FirstName'; will result in an object like below.

{
    fieldApiName: 'FirstName',
    ...
}

So you are passing the object FIRSTNAME_FIELD in the column definition.

{ label: 'First Name', fieldName: FIRSTNAME_FIELD },

Instead, you need to pass the fieldApiName property of the FIRSTNAME_FIELD.

So the final correct code is:

{ label: 'First Name', fieldName: FIRSTNAME_FIELD.fieldApiName },

*Use the same for all other fields.