Calling data using @wire adapter getRecord showing undefined user details

Question

Stuck Here. Cannot see output on console and on component too. It's coming undefined. Please Help.

JS Class

userId = Id
    userDetail
@wire(getRecord, {recordId:'0055i000000enpHAAQ', fields:['User.Name', 'User.Email']})
userDetailHandler(error,data){
    console.log('Hello Mini' +data)
    if(data){
        this.userDetail=data.fields
        this.data=data
        this.error=undefined
    }
    else if(error){
        console.error(error)
        this.error = error;
        this.data = undefined; 
    }
}
}

HTML:

<template>
    <lightning-card title="User Details Using Wire">
        <div class="slds-p-around_large">
            <template if:true={userDetail}>
            <div>Email- {userDetail.Email.value}</div>
            <div>Name- {userDetail.Name.value}</div>
            </template>
        </div>
    </lightning-card>
</template>

console o/p:

Hello Miniundefined 
{data: undefined, error: undefined}

Answer 1

1. I guess your syntax of userDetailHandler function is wrong it should be something like below

   userDetailHandler({ error, data }) { // You forgot to destructure the Object.

2. Also you need to make userDetail variable reactive as you are trying to access multilevel fields from the object which is not by default reactive.

   @track userDetail;

So your full code will be (Js Only)

userId = Id
@track userDetail;
@wire(getRecord, {recordId:'0055i000000enpHAAQ', fields:['User.Name','User.Email']})
userDetailHandler({ error, data }) {
    console.log('Hello Mini' +data)
    if(data){
        this.userDetail=data.fields
        this.data=data
        this.error=undefined
    }
    else if(error){
        console.error(error)
        this.error = error;
        this.data = undefined; 
    }
}

Note: You should Ideally assign recordId to a varibale and pass it as wire function using reactive symbol something like below

@wire(getRecord, {recordId:'$userId', fields:['User.Name','User.Email']})