LWC not rendering correctly on Communities

Question

LWC renders fine inside the Org, but just an empty lightning card on Communities. Have set the targets up for communtiies, community profile has acccess tot he Apex, they're apex enabled, CSP Trust is enabled for the callout to AWS, FLS and object perms correct cos they can see the record "natively". No errors in browser debug.

LWC just renders a list of RTF fields, nothing complex at all.

Apex controller

public without sharing class imageAttachmentController
{
    @AuraEnabled(cacheable=true)
    public static List<SObject> getImages(Id recordId, String objectName)
    {
        System.debug(recordId + ' - ' + objectName);
        List<SObject> images = new List<SObject>();
        
        if(recordId != null && objectName != null)
        {
            String objectType = recordId.getSObjectType().getDescribe().getName();
            if(objectType == 'WorkOrder')    //Work Order
            {
                String query = 'SELECT Image_RTF__c FROM ' + objectName + ' WHERE Work_Order__c = \'' + recordId + '\'';
                System.debug(query);
                images = Database.query(query);
            }
            else if(objectType == 'WorkOrderLineItem')   //Work Order Line Item
            {
                String query = 'SELECT Image_RTF__c FROM ' + objectName + ' WHERE Work_Order_Line_Item__c = \'' + recordId + '\'';
                System.debug(query);
                images = Database.query(query);
            }
        }
        return images;
    }
}

JS controller

import { LightningElement, wire, api, track } from 'lwc';
import getImages from '@salesforce/apex/imageAttachmentController.getImages';

export default class ImageAttachmentViewer extends LightningElement
{
    
    @api listType;
    @api recordId;

    listlabel;

    @wire(getImages, {recordId: '$recordId', objectName: '$listType'})
    images;

    connectedCallback()
    {
        console.log(this.listType);

        switch(this.listType)
        {
            case 'Work_Order_Attached_Image__c':
                this.listlabel = 'Work Order Images';
                break;
            case 'Work_Order_Item_Attached_Image__c':
                this.listlabel = 'Work Order Item Images';
                break;
            case 'Damage_Report_Attached_Image__c':
                this.listlabel = 'Damage Report Images';
                break;
            case 'Risk_Assessment_Attached_Image__c':
                this.listlabel = 'Risk Assessment Images';
                break;
            case 'Meter_Attached_Image__c':
                this.listlabel = 'Meter Images';
                break;
            case 'Meter_Reading_Attached_Image__c':
                this.listlabel = 'Meter Reading Images';
                break;
            case 'Work_Inspection_Form_Attached_Image__c':
                this.listlabel = 'Work Inspection Form Content Images';
                break;
            default:
                this.listlabel = 'Attached images';
        }
    }
}

Markup

<template>
    <lightning-card title={listlabel}>
        <ul class="slds-var-m-around_medium">
            <template for:each={images.data} for:item="image">
                    <li key={image.Id}>
                        <lightning-formatted-rich-text value={image.Image_RTF__c}></lightning-formatted-rich-text>
                    </li>
            </template>
        </ul>
    </lightning-card>
</template>

Meta

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>49.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <property name="listType" type="String" datasource="apex://imageViewerDesignController" label="Related List Type"/>
        </targetConfig>
        <targetConfig targets="lightningCommunity__Default">
            <property name="listType" type="String" datasource="apex://imageViewerDesignController" label="Related List Type"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Design Controller

global class imageViewerDesignController extends VisualEditor.DynamicPickList
{
    global override VisualEditor.DataRow getDefaultValue()
    {
        VisualEditor.DataRow defaultValue = new VisualEditor.DataRow('Work Order', 'WorkOrder');
        return defaultValue;
    }

    global override VisualEditor.DynamicPickListRows getValues()
    {
        VisualEditor.DataRow workOrderValue = new VisualEditor.DataRow('Work Order', 'Work_Order_Attached_Image__c');
        VisualEditor.DataRow workOrderItemValue = new VisualEditor.DataRow('Work Order Line Item', 'Work_Order_Item_Attached_Image__c');
        VisualEditor.DataRow meterValue = new VisualEditor.DataRow('Meter', 'Meter_Attached_Image__c');
        VisualEditor.DataRow meterReadingValue = new VisualEditor.DataRow('Meter Reading', 'Meter_Reading_Attached_Image__c');
        VisualEditor.DataRow workInspectionFormContentValue = new VisualEditor.DataRow('Work Inspection Form Content', 'Work_Inspection_Form_Attached_Image__c');
        VisualEditor.DataRow damageReportValue = new VisualEditor.DataRow('Damage Report', 'Damage_Report_Attached_Image__c');
        VisualEditor.DataRow riskAssessmentValue = new VisualEditor.DataRow('Risk Assessment', 'Risk_Assessment_Atttached_Image__c');

        VisualEditor.DynamicPickListRows  picklistValues = new VisualEditor.DynamicPickListRows();
        picklistValues.addRow(workOrderValue);
        picklistValues.addRow(workOrderItemValue);
        picklistValues.addRow(meterValue);
        picklistValues.addRow(meterReadingValue);
        picklistValues.addRow(workInspectionFormContentValue);
        picklistValues.addRow(damageReportValue);
        picklistValues.addRow(riskAssessmentValue);
        return picklistValues;

    }
}

Answer 1

Posting as an answer for anyone stumbling onto this thread with a similar issue

Communities seems to work a little differently (as at Dec 2020) with regard to RecordID. It's not automatically provided, even if you specify it in your component with an @api tag. You need to explicitly mark it as a property in your .js-meta.xml in the targetConfig secttion, like so <property name="recordId" type="String" ></property>

Additionally, when adding your component to a record page for communities in Experience Builder, you will need to set this property to the value {!recordId} as shown below