JSX片段未找到对应闭合标签的报错排查求助

Hey folks, I've been stuck on this JSX code for a solid 10 minutes now and I'm totally clueless about what's wrong. I've gone over ternary operators, tag closures, curly brace matches—you name it, I've scanned it multiple times. Every time I try to fix one thing, more errors pop up out of nowhere. Can someone please help me track down the root cause here?

Here's my problematic code:

return (
return (
<div>
<Head>
<title>KYC Verification</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="flex w-full">
<motion.div
className="flex justify-center py-6 sm:px-6 lg:px-8 w-full text-black dark:text-neutral-100"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
<div className="bg-l-fg dark:bg-d-fg w-full max-w-5xl p-3 rounded-lg">
<h1 className="text-lg text-black dark:text-white font-semibold">KYC Verification</h1>
<p className="text-black dark:text-neutral-100 mb-3">
We need to verify your identity to prevent fraud. Please upload a picture of your ID
(front and back) and a picture of your face.
</p>
{!complete && (
<>
{showCamera ? (
<>
<label>Take a picture of your face:</label>
<Webcam audio={false} ref={webcamRef} screenshotFormat="image/png" />
<button
onClick={capture}
className="bg-indigo-600 w-full py-1 px-3 mt-1 rounded-lg"
>
Capture
</button>
<Dropzone onDrop={onDropFace} multiple>
{({ getRootProps, getInputProps }) => (
<div {...getRootProps()}>
<input {...getInputProps()} />
<p
className={`${
faceImage ? "border-green-500" : "border-indigo-600"
} border border-dashed cursor-pointer w-full px-3 py-1 text-center rounded-lg mt-2`}
>
Don't have a camera? Upload a picture of your face.
</p>
</div>
)}
</Dropzone>
</>
) : (
<>
{!faceImage && (
<>
<label>Upload your ID:</label>
<Image
className="ml-80 mb-3 rounded-2xl"
src="/front.png"
width={350}
height={350}
/>
<Dropzone onDrop={onDropIdFront} multiple>
{({ getRootProps, getInputProps }) => (
<div {...getRootProps()}>
<input {...getInputProps()} />
<p
className={`${
idFrontImage ? "border-green-500" : "border-indigo-600"
} border border-dashed cursor-pointer w-full px-3 py-1 text-center rounded-lg mt-4`}
>
Front of ID
</p>
</div>
)}
</Dropzone>
<Dropzone onDrop={onDropIdBack} multiple>
{({ getRootProps, getInputProps }) => (
<div {...getRootProps()}>
<input {...getInputProps()} />
<p
className={`${
idBackImage ? "border-green-500" : "border-indigo-600"
} border border-dashed cursor-pointer w-full px-3 py-1 text-center rounded-lg mt-4`}
>
Back of ID
</p>
</div>
)}
</Dropzone>
<button
onClick={ Submit}
disabled={!idFrontImage || !idBackImage}
className="bg-indigo-600 w-full py-1 px-3 mt-4 rounded-lg"
>
Submit
</button>
<button
onClick={toggleCamera}
className="bg-indigo-600 w-full py-1 px-3 mt-2 rounded-lg"
>
Use Camera
</button>
</>
)}
{faceImage && (
<>
<label>Upload your ID (back):</label>
<Image
className="ml-80 mb-3 rounded-2xl"
src="/back.png"
width={350}
height={350}
/>
<Dropzone onDrop={onDropIdBack} multiple>
{({ getRootProps, getInputProps }) => (
<div {...getRootProps()}>
<input {...getInputProps()} />
<p
className={`${
idBackImage ? "border-green-500" : "border-indigo-600"
} border border-dashed cursor-pointer w-full px-3 py-1 text-center rounded-lg mt-4`}
>
Back of ID
</p>
</div>
)}
</Dropzone>
<button
onClick={handleSubmit}
disabled={!idBackImage}
className="bg-indigo-600 w-full py-1 px-3 mt-4 rounded-lg"
>
Submit
</button>
<button
onClick={toggleCamera}
className="bg-indigo-600 w-full py-1 px-3 mt-2 rounded-lg"
>
Retake Picture
</button>
</>
)}
</>
)}
</>
)}
{faceImage && idFrontImage && idBackImage && (
<>
<div className="mt-3">
<label htmlFor="name">Name:</label>
<input
ref={name}
placeholder="Enter your name"
className="w-full bg-l-fg h-[2.85rem]  rounded-r-md dark:bg-d-bg text-black dark:text-white font-neue font-bold tracking-wide focus:outline-none px-3 border border-gray-400 dark:border-neutral-800"
required
/>
</div>
<div className="mt-3">
<FaRegAddressCard className="inline-block mr-2" />
<label htmlFor="name">Address:</label>
<input
ref={address}
placeholder="Enter your address"
className="w-full bg-l-fg h-[2.85rem]  rounded-r-md dark:bg-d-bg text-black dark:text-white font-neue font-bold tracking-wide focus:outline-none px-3 border border-gray-400 dark:border-neutral-800"
required
/>
</div>
<div className="mt-3">
<label htmlFor="name">Date of Birth:</label>
<input
type="date"
ref={dob}
placeholder="Enter your date of birth"
className="w-full bg-l-fg h-[2.85rem]  rounded-r-md dark:bg-d-bg text-black dark:text-white font-neue font-bold tracking-wide focus:outline-none px-3 border border-gray-400 dark:border-neutral-800"
required
/>
</div>
<div className="mt-3">
<label htmlFor="name">Country:</label>
<input
ref={country}
placeholder="Enter your country"
className="w-full bg-l-fg h-[2.85rem]  rounded-r-md dark:bg-d-bg text-black dark:text-white font-neue font-bold tracking-wide focus:outline-none px-3 border border-gray-400 dark:border-neutral-800"
required
/>
</div>
<div className="mt-3">
<label htmlFor="name">State:</label>
<input
ref={state}
placeholder="Enter your state"
className="w-full bg-l-fg h-[2.85rem]  rounded-r-md dark:bg-d-bg text-black dark:text-white font-neue font-bold tracking-wide focus:outline-none px-3 border border-gray-400 dark:border-neutral-800"
required
/>
</div>
<div className="mt-3">
<FaCity className="inline-block mr-2" />
<label htmlFor="name">City:</label>
<input
ref={city}
placeholder="Enter your city"
className="w-full bg-l-fg h-[2.85rem]  rounded-r-md dark:bg-d-bg text-black dark:text-white font-neue font-bold tracking-wide focus:outline-none px-3 border border-gray-400 dark:border-neutral-800"
required
/>
</div>
<div className="mt-3">
<label htmlFor="name">Zip Code:</label>
<input
ref={zip}
placeholder="Enter your zip code"
className="w-full bg-l-fg h-[2.85rem]  rounded-r-md dark:bg-d-bg text-black dark:text-white font-neue font-bold tracking-wide focus:outline-none px-3 border border-gray-400 dark:border-neutral-800"
required
/>
</div>
<div className="mt-3">
<FaPhone className="inline-block mr-2" />
<label htmlFor="name">Phone Number:</label>
<input
ref={phone}
placeholder="Enter your phone number"
className="w-full bg-l-fg h-[2.85rem]  rounded-r-md dark:bg-d-bg text-black dark:text-white font-neue font-bold tracking-wide focus:outline-none px-3 border border-gray-400 dark:border-neutral-800"
required
/>
</div>
<div className="mt-3">
<AiOutlineMail className="inline-block mr-2" />
<label htmlFor="name">Email:</label>
<input
ref={email}
placeholder="Enter your email"
className="w-full bg-l-fg h-[2.85rem]  rounded-r-md dark:bg-d-bg text-black dark:text-white font-neue font-bold tracking-wide focus:outline-none px-3 border border-gray-400 dark:border-neutral-800"
required
/>
</div>
<div className="mt-3">
<label htmlFor="ssn">SSN / SIN / NISS / NIN / OIB:</label>
<input
type="text"
ref={ssn}
placeholder="Enter your SSN"
className="w-full bg-l-fg h-[2.85rem]  rounded-r-md dark:bg-d-bg text-black dark:text-white font-neue font-bold tracking-wide focus:outline-none px-3 border border-gray-400 dark:border-neutral-800"
/>
</div>
<button
className="bg-indigo-600 w-full py-1 px-3 mt-3 rounded-lg"
onClick={handleSubmit}
>
Submit
</button>
<button
className="bg-red-500 w-full py-1 px-3 mt-1 rounded-lg"
onClick={() => {
setIdFrontImage(null)
setIdBackImage(null)
setFaceImage(null)
setShowCamera(false)
}}
>
Retry
</button>
</>
)}
{fComplete && (
<>
{!fIdFrontImage && !fIdFrontImage && (
<>
<label>Upload your Face + ID:</label>
<Image
className="ml-80 mb-3 rounded-2xl"
src="/front.png"
width={350}
height={350}
/>
<Dropzone onDrop={onDropFIdFront} multiple>
{({ getRootProps, getInputProps }) => (
<div {...getRootProps()}>
<input {...getInputProps()} />
<p
className={`${
fIdFrontImage ? "border-green-500" : "border-indigo-600"
} border border-dashed cursor-pointer w-full px-3 py-1 text-center rounded-lg mt-4`}
>
Face + Front of ID
</p>
</div>
)}
</Dropzone>
<Dropzone onDrop={onDropFIdBack} multiple>
{({ getRootProps, getInputProps }) => (
<div {...getRootProps()}>
<input {...getInputProps()} />
<p
className={`${
fIdBackImage ? "border-green-500" : "border-indigo-600"
} border border-dashed cursor-pointer w-full px-3 py-1 text-center rounded-lg mt-4`}
>
Face + Back of ID
</p>
</div>
)}
</Dropzone>
<Image
className="ml-80 mt-4 rounded-2xl"
src="/back.png"
width={350}
height={350}
/>
{fIdFrontImage && fIdBackImage && (
<button
className="bg-indigo-600 w-full py-1 px-3 mt-1 rounded-lg"
onClick={fSubmit}
>
Submit
</button>
)}
</>
)}
</>
)}
{fIdFrontImage && fIdBackImage (
<>
<div className="flex flex-col justify-center items-center mb-10">
<h2 className="text-2xl font-bold">Step 4: Upload a proof of address</h2>
<div className="mt-4">
<label className="flex items-center">
<input
type="checkbox"
className="form-checkbox"
checked={billState}
onChange={() => setBillState(!billState)}
/>
<span className="ml-2">I do not have a proof of address document</span>
</label>
</div>
{!billState && (
<div className="mt-4">
{bill ? (
<div className="relative w-52 h-52">
<Image src={bill} alt="Bill Image" layout="fill" objectFit="cover" />
</div>
) : (
<div className="w-52 h-52 bg-gray-200 flex justify-center items-center">
<FaRegAddressCard className="text-4xl" />
</div>
)}
<Dropzone onDrop={onDropBill}>
{({ getRootProps, getInputProps }) => (
<div className="mt-4">
<div
{...getRootProps()}
className="bg-blue-500 text-white font-bold py-2 px-4 rounded cursor-pointer"
>
<input {...getInputProps()} />
Upload Bill
</div>
</div>
)}
</Dropzone>
</div>
)}
</div>
<div className="flex justify-center mb-10">
<button
className="bg-blue-500 text-white font-bold py-2 px-4 rounded"
onClick={fSubmit}
>
Submit
</button>
</div>
)
</div>
<div className="flex flex-col justify-center items-center">
<h1 className="text-4xl font-bold mb-4">Verification Complete</h1>
<h2 className="text-2xl font-semibold mb-8">
Thank you for completing the KYC verification process!
</h2>
<Image src="/success.png" alt="Success Image" width={300} height={300} />
</div>
)}
</div>
</motion.div>
</main>
</div>
)
}

I've poured over every part of this code so many times—checking if all tags are closed properly, if curly braces are matched, if ternary logic is structured right—but I just can't pinpoint the issue. It's frustrating because every small tweak seems to spawn more errors. Any help or fresh eyes would be a huge lifesaver!

备注：内容来源于stack exchange，提问作者Wocksips