LWC not displaying any Data in component when attempting to display the Account on Contact

Question

I'm trying to display an LWC component on my contact that shows the Account Page, but I see no data when the page is loaded. (I'm using standard objects as a proxy here as the end goal is to use this for custom objects)

Any thoughts on why this is happening and suggestions to fix it??

Here's what I see:

Here's the HTML for the Component:

  <lightning-card title="Account Information" icon-name="standard:account">
    <template if:true={contact.data}>
      <lightning-record-form
        record-id={contact.data.fields.AccountId.value}
        object-api-name="Account"
        layout-type="Full"
        mode="readonly"
      >
      </lightning-record-form>
    </template>
    <template if:true={error}>
      <div class="slds-text-color_error">
        <p>{error}</p>
      </div>
    </template>
  </lightning-card>
</template> 

Here's the Javascript for the Component (the Account ID is correctly shown when I open the Console logs):

import { getRecord } from "lightning/uiRecordApi";
import CONTACT_ACCOUNTID_FIELD from "@salesforce/schema/Contact.AccountId";

export default class AccountDisplay extends LightningElement {
  @api recordId; // Contact record Id
  error;

  @wire(getRecord, { recordId: "$recordId", fields: [CONTACT_ACCOUNTID_FIELD] })
  contact({ error, data }) {
    if (data) {
      console.log("Account Id:", data.fields.AccountId.value);
      this.error = undefined;
    } else if (error) {
      console.error("Error:", JSON.stringify(error));
      this.error = "Error fetching account information";
    }
  }
}

Here's the XML for the Component:

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>53.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Contact</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Answer 1

Please try the below code.I hope it would work Please Update your markUp with the below code

<template>
    <lightning-card title="Account Information" icon-name="standard:account">
        <template if:true={AccountCheck}>
          <lightning-record-form
            record-id={AccountID}
            object-api-name="Account"
            layout-type="Full"
            mode="readonly"
          >
          </lightning-record-form>
        </template>
        <template if:true={error}>
          <div class="slds-text-color_error">
            <p>{errorMessage}</p>
          </div>
        </template>
      </lightning-card>
</template>

Please Update your JS file with the below code

@api recordId; // Contact record Id
errorMessage;
error;
AccountID;

@wire(getRecord, { recordId: "$recordId", fields: [CONTACT_ACCOUNTID_FIELD] })
contact({ error, data }) {
  if (data) {
    if(data.fields.AccountId.value)
    {
        this.AccountID = data.fields.AccountId.value;
        this.error = false;
    }
    else{ //if Contact don't have AccountId
       this.error = true;
       this.errorMessage = "Account not found ";
    } 
  } else if (error) {
    console.error("Error:", JSON.stringify(error));
    this.error = true;
    this.errorMessage = "Error fetching account information";
    
  }
}
get AccountCheck()
{
    if(this.AccountID)
    {
        return true ;
    }
    return false
}