部署修改后的LWC Recipes组件出现undefined数据，求助排查

从你提供的代码和问题描述来看，以下是几个可能的原因及对应的解决步骤：

1. Apex类存在语法错误 #

你提供的ContactController代码末尾多了一个多余的闭合大括号}，这会导致Apex类编译失败。部署有语法错误的Apex类后，组件调用该方法时会直接出错，进而引发数据异常。

解决：
修正Apex类代码，移除多余的}，确保类能正常编译部署。修正后的完整Apex类示例：

public with sharing class ContactController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContactList() {
        return [
            SELECT
                Id,
                Name,
                FirstName,
                LastName,
                MailingAddress
            FROM Contact
            WHERE Name != NULL
            WITH SECURITY_ENFORCED
            LIMIT 10
        ];
    }
}

2. 用户权限不足 #

Apex方法使用了WITH SECURITY_ENFORCED，会严格遵守对象和字段的权限控制。如果当前用户没有以下权限，会导致返回的Contact数据缺失字段或直接返回错误：

• Contact对象的读取权限
• Contact的Name（含FirstName、LastName）字段的读取权限

解决：

• 检查当前用户的Profile或Permission Set，确认已授予Contact对象的读取权限
• 确认Profile/Permission Set中已开启Contact的Name、FirstName、LastName字段的访问权限

3. 无符合条件的Contact记录 #

Apex查询条件是WHERE Name != NULL，如果你的环境中没有满足该条件的Contact记录（即所有Contact的FirstName和LastName都为空，不过默认Contact的LastName是必填项，这种情况较少见），会返回空数组。不过空数组不会导致显示undefined，但可以确认是否存在有效数据。

解决：
在Salesforce后台创建几条带有FirstName或LastName的Contact记录，再测试组件。

4. 添加调试和错误显示 #

目前你的HTML没有显示任何错误信息，无法直观判断问题所在。建议添加错误输出，同时在JS中添加日志调试：

修改JS代码（添加日志）： #

import { LightningElement, wire } from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContactList';

export default class ApexWireMethodToFunction extends LightningElement {
    contacts;
    error;

    @wire(getContactList)
    wiredContacts({ error, data }) {
        // 控制台打印数据和错误，方便排查
        console.log('返回的数据:', data);
        console.log('返回的错误:', error);
        
        if (data) {
            this.contacts = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.contacts = undefined;
        }
    }
}

修改HTML代码（添加错误显示）： #

<template>
    <lightning-card title="ApexWireMethodToFunction" icon-name="custom:custom63">
        <div class="slds-var-m-around_medium">
            <template if:true={contacts}>
                <template for:each={contacts} for:item="contact">
                    <p key={contact.Id}>{contact.Name}</p>
                </template>
            </template>
            <!-- 添加错误信息显示 -->
            <template if:true={error}>
                <p class="slds-text-color_error">加载失败：{error.message}</p>
            </template>
        </div>
        <c-view-source source="lwc/apexWireMethodToFunction" slot="footer">
            Call an Apex method that retrieves a list of records using @wire. In
            this recipe, the Apex method is @wired to a component function.
        </c-view-source>
    </lightning-card>
</template>

通过浏览器控制台的日志和页面上的错误提示，可以快速定位具体问题。

内容的提问来源于stack exchange，提问作者Aishwarya