LWC [Cannot read properties of undefined (reading 'Name')]

Question

I am stuck on this error.

[Cannot read properties of undefined (reading 'Name')]

Please refer to the screenshot below.

I checked my boatSearchForm.js and getBoatTypes is imported.

Can someone enlighten me on how to solve this problem?

import { LightningElement, api } from 'lwc';
const TILE_WRAPPER_SELECTED_CLASS = 'tile-wrapper selected';
const TILE_WRAPPER_UNSELECTED_CLASS = 'tile-wrapper';

export default class BoatTile extends LightningElement {
    @api boat;
    @api selectedBoatId;
    
    // Getter for dynamically setting the background image for the picture
    get backgroundStyle() {
        return `background-image:url(${this.boat.Picture__c})`;
     }
    
    // Getter for dynamically setting the tile class based on whether the
    // current boat is selected
    get tileClass() { 
        // return this.selectedBoatId == this.boatId ? TILE_WRAPPER_SELECTED_CLASS : TILE_WRAPPER_UNSELECTED_CLASS;
        return this.selectedBoatId ? TILE_WRAPPER_SELECTED_CLASS : TILE_WRAPPER_UNSELECTED_CLASS;
    }
    
    // Fires event with the Id of the boat that has been selected.
    selectBoat() { 
        const boatselectEvent = new CustomEvent('boatselect', { 
            detail: { boatId : this.boat.id}
        });
        this.dispatchEvent(boatselectEvent);
    }
}

Answer 1

I think you must have some markup like this in your html file:

{boat.BoatType__r.Name}

Instead you should validate if boat.BoatType__r is not null or undefined

<template if:true={boat}>
    <template if:true={boat.BoatType__r}>
        {boat.BoatType__r.Name}
    </template>
</template>