Unable to extract recordId from the lightning web component

Question

I tried to get record id from the custom object "Categories__c" unfortunately it is not working. When I try the same with the custom recordId, it works. Can anyone help me to solve this issue?.

Here are my following codes: Categories.html

<template>
    <lightning-card>
        <lightning-layout horizontal-align="spread" multiple-rows>
            <lightning-record-view-form record-id= {recordId} object-api-name="Categories__c">
                <p style="color:blue;">Categories</p>
                <div class="slds-box slds-theme\_default">
            <lightning-layout-item size= 6 >
                <lightning-output-field field-name="Consultant_Summary__c"></lightning-output-field> 
                <lightning-output-field field-name="Developer_Summary__c"></lightning-output-field> 
                <lightning-output-field field-name="Senior_Developer_Summary__c"></lightning-output-field> 
                <lightning-output-field field-name="Senior_Consultant_Summary__c"></lightning-output-field> 
                <lightning-output-field field-name="Personal_Manager_Summary__c"></lightning-output-field> 
           </lightning-layout-item>
           </div>
            </lightning-record-view-form>
        </lightning-layout>
    </lightning-card>
</template>

Categories.js

import { LightningElement, wire, api } from 'lwc';
import CONSULTANT from '@salesforce/schema/Categories__c.Consultant_Summary__c';
import DEVELOPER from '@salesforce/schema/Categories__c.Developer_Summary__c';
import SENIOR_CONSULTANT from '@salesforce/schema/Categories__c.Senior_Consultant_Summary__c';
import SENIOR_DEVELOPER from '@salesforce/schema/Categories__c.Senior_Developer_Summary__c';
import PERSONAL_MANAGER from '@salesforce/schema/Categories__c.Personal_Manager_Summary__c';
import getcat from '@salesforce/apex/CategoriesController.getcat';

const COLUMNS = [
    { label: 'Consultant (No of Days Estimated)', fieldName: CONSULTANT.fieldApiName, type: 'number' },
    { label: 'Developer (No of Days Estimated)', fieldName: DEVELOPER.fieldApiName, type: 'number' },
    { label: 'Senior Consultant (No of Days Estimated)', fieldName: SENIOR_CONSULTANT.fieldApiName, type: 'number' },
    { label: 'Senior Developer (No of Days Estimated)', fieldName: SENIOR_DEVELOPER.fieldApiName, type: 'number' },
    { label: 'Personal Manager (No of Days Estimated)', fieldName: PERSONAL_MANAGER.fieldApiName, type: 'number' }
];
export default class Categories extends LightningElement {
    @api recordId;
    columns = COLUMNS;
    @wire(getcat)
    cats;
}

Categories.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Here is the output if I give an actual record id instead of the keyword,

Here is the output when I actually use the keyword "recordId".

Answer 1

recordId does not work Locally, it will only work on record pages as documented:

Make a Component Aware of Its Record Context

IMPORTANT The recordId is set only when you place or invoke the component in an explicit record context. In all other cases, the recordId isn’t set, and your component can’t depend on it.