Next.js组件执行build时出错，开发环境正常求助

基于Next.js的React组件项目，npm run dev运行正常，但执行npm run build时出现错误。

相关代码片段 #

提交处理函数 #

// @ts-ignore
const handleSubmit = (e) => {
e.preventDefault();

 const formData = {
    country: selectedCountry,
    brand: selectedBrand,
    carModel: selectedCarModel,
    charger : selectedCharger,
    switchValueIni: switchValueIni,
    switchValueEnd: switchValueEnd,
    };

 fetch('http://localhost:8000/api/calculate-cost', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
    })
        .then((response) => response.json())
        .then((data) => {
            setApiResult(data);
        })
        .catch((error) => {
            console.error(error);
        })
        .finally(() => {
            setSubmitting(false);
        });
};

渲染出错部分 #

{apiResult && (
    <div className="mt-4 border border-blue-500 rounded p-4">
        <span className="font-bold">Resultado:</span>
        <div>Kw necesarios: {apiResult.kwneed}</div>
        <div>Coste: {apiResult.cost}</div>
    </div>
)}

已尝试的解决方案 #

• 添加"use client"指令标记组件为客户端组件
• 将渲染部分的属性访问改为可选链apiResult?.kwneed和apiResult?.cost
  修改后的完整组件代码如下：

"use client";

// Home.js
 

export default function Home() {
    const [apiResult, setApiResult] = useState(null);

    // @ts-ignore
    const handleSubmit = (e) => {
        e.preventDefault();

        const formData = {
            country: selectedCountry,
            brand: selectedBrand,
            carModel: selectedCarModel,
            charger : selectedCharger,
            switchValueIni: switchValueIni,
            switchValueEnd: switchValueEnd,
        };

        fetch('http://localhost:8000/api/calculate-cost', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(formData),
        })
            .then((response) => response.json())
            .then((data) => {
                setApiResult(data);
            })
            .catch((error) => {
                console.error(error);
            })
            .finally(() => {
                setSubmitting(false);
            });
    };


    return (
        <>
            <Header />
            <Content>
                        {apiResult && (
                            <div className="mt-4 border border-blue-500 rounded p-4">
                                <span className="font-bold">Resultado:</span>
                                <div>Kw necesarios: {apiResult?.kwneed}</div>
                                <div>Coste: {apiResult?.cost}</div>
                            </div>
                        )}

                    </form>
                    <HomeContent/>
                </main>
            </Content>
            <Footer />
        </>
    );

}

但执行npm run build时仍出现相同错误。

错误信息 #

build过程中提示TypeError: Cannot read properties of null (reading 'kwneed')

解决建议 #

1. 补充缺失的状态声明
   代码中使用了setSubmitting(false)，但未初始化对应的状态变量，添加以下代码修复：

   const [submitting, setSubmitting] = useState(false);
   

2. 强化条件渲染的类型判断
   即使添加了可选链，静态构建时仍可能尝试解析属性，优化渲染逻辑：

   {apiResult 
     && typeof apiResult === 'object' 
     && !Array.isArray(apiResult) 
     && (
       <div className="mt-4 border border-blue-500 rounded p-4">
           <span className="font-bold">Resultado:</span>
           <div>Kw necesarios: {apiResult.kwneed ?? 0}</div>
           <div>Coste: {apiResult.cost ?? 0}</div>
       </div>
   )}
   

3. 检查外部状态变量的初始化
   确认selectedCountry、selectedBrand等变量是否在组件内正确声明并初始化，避免build时出现未定义变量错误。

4. 处理API返回的异常数据
   在设置状态时为属性添加默认值，避免后端返回数据结构不符导致报错：

   .then((data) => {
       setApiResult({
           kwneed: data?.kwneed || 0,
           cost: data?.cost || 0
       });
   })
   

5. 验证子组件的客户端标记
   确认Header、Content等导入的组件如果包含交互逻辑，也需要添加"use client"指令，避免服务端/客户端组件混用问题。

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