LWC Community recordId undefined

Question

I am very new to Salesforce and I am stuck using LWC with communities. The problem is simple:
I generated my record list and when I click on the record I would like to access the selected record information on a detail page.
It works well when I hardcode the recordId but when using the @api recordId, the object I get is empty and recordId is undefined. I am trying to display it on a custom Object page.

When trying to do the same in Salesforce itself, it works as I can reference the object in the meta XML.

Here is my code: JS

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import MEETING_NAME_FIELD from '@salesforce/schema/Meeting__c.Name';

export default class ComMeetingHeader extends LightningElement {
    @api recordId;

  @wire(getRecord, { recordId: '$recordId', fields: [MEETING_NAME_FIELD] })
  record;

  get meetingData() {
    return getFieldValue(this.record.data, MEETING_NAME_FIELD);
  }
}

HTML (object record seems to exist as it goes inside the if statement)

<template>
  <h1>{meetingData}</h1>
  <lightning-card title="Wire Function" icon-name="standard:contact">
      <template if:true={record}>
          <div class="slds-m-around_medium">
            <h1>Inside record</h1>
          </div>
      </template>
      <template if:true={error}>
          <h1>Inside error</h1>
          <div>{error}></div>
      </template>
  </lightning-card>
</template>

XML

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

Thanks!

Answer 1

From docs, you have to add <target>lightning__RecordPage</target> in the lwc component meta, for it to accept recordId from the detail page.

<targets>
    <target>lightning__RecordPage</target>
</targets>

Indicates that the component takes a record Id as an attribute.

EDIT: Apparently this works in App builder, but in communities, things are a bit funny.

You have to explicitly expose the recordIdusing <targetConfigs>

    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property name="recordId" type="String" ></property>
        </targetConfig>
    </targetConfigs>

Then in community builder provide the recordId as {!recordId}

Answer 2

you might just be missing {!recordId} in the dialogue box when you add a component to community builder. For me that was the case

Answer 3

Not sure but for me '$recordId' did not work in wired getrecord function. I was getting recordid data in renderedcallback() and in connectedcallack() i was getting it as undefined. To resolve this, I wrote one apex method to fetch data related to record and called that apex method from renderedcallback() Let me know if this helped to you.