LWC: Getting RecordId From Community Page [duplicate]

Question

Responding to mark as duplciate: See below. This is not the same question as the one I am saying did not have a working answer.

This question was asked here, but the answer didn't work for either me or another person, so I figured I'd ask it again in case anyone has a solution.

I'd like to get a recordId from the URL on a standard record detail page in a community. As best I can tell from documentation, what I have should be correct:

.js file:

import { LightningElement, track, api } from 'lwc';
....
 @api recordId;

.xml file:

<targets>
    <target>lightningCommunity__Default</target>
    <target>lightningCommunity__Page</target>
    <target>lightning__RecordPage</target>
</targets>
<targetConfigs>
    <targetConfig targets="lightningCommunity__Default">
        <property name="recordId" type="String label="Record Id"
        description="Automatically bind the page's record id to the component variable"
        default="{!recordId}"/>
    </targetConfig>
</targetConfigs>

Whenever recordId is referenced it throws a fatal error that the variable is undefined. Any guesses as to how to fix this?

Answer 1

This is the minimum code example I can provide to show how to work with a record ID. I have deployed this code and verified it works from within a community. This code is copy-pasta. If this code does not work for you chances are you are not configuring your component correctly in the community:

JS:

import { LightningElement, api } from 'lwc';

export default class RecordComponent extends LightningElement {
    @api recordId

    handleConsoleLogClick(event) {
        console.log(this.recordId);
    }
}

js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="recordComponent">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property name="recordId" type="String" label="Record ID"
                description="Should be set to {!recordId}"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

html

<template>
    <lightning-button 
        variant="brand" 
        label="Console.log" 
        title="Console.log" 
        onclick={handleConsoleLogClick} 
    ></lightning-button>
</template>

Results:

Requirements

You must configure your component within the community to use the {!recordId} value provided by the page:

Select the component:

Configure the component:

This value can be provided in one of two ways that I know of.

1. The page can contain a url paramter called recordId
2. The component can be embeded onto the same page as a record detail component. This component sets the recordId value.