How to get the current Contact page's contact name in LWC?

Question

This current contact page shows the detail of the contact - "Ben". Is there a quick way to get the contact name "Ben" and display it in a component?

https://something.lightning.force.com/lightning/r/Contact/0035z001209Mc5tzzz/view

Currently trying: use CurrentPageReference to get the ID, then fetch the record from DB, and display it in a component

Answer 1

Make a Component Aware of Its Record Context explains how to do this:

import { LightningElement, api } from 'lwc';
export default class TestClass extends LightningElement {
    @api recordId;
}

Make sure you pay close attention; LWC is case sensitive.

From there, you just load the data with getRecord:

import { LightningElement, wire, api } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import CONTACT_FIRST_NAME from '@salesforce/schema/Contact.FirstName';

export default class MyClass extends LightningElement {
  @api recordId;
  @wire(getRecord, { recordId: '$recordId', fields: [CONTACT_FIRST_NAME] }) contactRecord;
  get contactName() {
    return getFieldValue(this.contactRecord.data, CONTACT_FIRST_NAME);
  }
}

This is basically what you described, but leveraging Lightning Data Service (LDS) to load the data for you.