我一直在本地工作这个项目，它工作得很好，但当我部署到Vercel我得到错误:
属性imageURL在类型{}上不存在
属性alt在类型{}上不存在
我已经尝试定义类型，因为我已经读到的堆栈溢出，但它没有修复错误。
我正在使用Sanity作为CMS将图像拉到前端。
import React from "react";
import leftarrow from "../public/arrowleft.png";
import rightarrow from "../public/arrowright.png";
interface Image {
imageUrl: any;
alt: any;
}
export default function GalleryBlock({ images }: any) {
const [currentIndex, setCurrentIndex] = React.useState(0);
let initialPosition: number | undefined;
let finalPosition: number | undefined;
const decreaseIndex = () => {
let prev = currentIndex == 0 ? images.length - 1 : currentIndex - 1;
document.getElementById(`image-${currentIndex}`)!.style.opacity = "0";
document.getElementById(`image-${prev}`)!.style.opacity = "1";
setCurrentIndex(prev);
};
const increaseIndex = () => {
let next = currentIndex == images.length - 1 ? 0 : currentIndex + 1;
document.getElementById(`image-${currentIndex}`)!.style.opacity = "0";
document.getElementById(`image-${next}`)!.style.opacity = "1";
setCurrentIndex(next);
};
const changeToImage = (index: number) => {
document.getElementById(`image-${currentIndex}`)!.style.opacity = "0";
document.getElementById(`image-${index}`)!.style.opacity = "1";
setCurrentIndex(index);
};
const swipeMove = () => {
if (initialPosition !== undefined && finalPosition !== undefined) {
if (finalPosition - initialPosition > 30) {
decreaseIndex();
initialPosition = undefined;
finalPosition = undefined;
} else if (initialPosition - finalPosition > 30) {
increaseIndex();
initialPosition = undefined;
finalPosition = undefined;
}
}
};
return images.length > 0 ? (
<div>
<div className="flex px-[20px] pt-[20px] mb-[40px] md:px-[50px]">
<div
className={"hidden items-center text-center cursor-pointer sm:flex"}
onClick={() => decreaseIndex()}
>
<img src={leftarrow.src} width={50} />
</div>
<div
className={"w-full h-[500px] relative mx-[10px]"}
onTouchStart={(e) => {
initialPosition = e.touches[0].clientX;
}}
onTouchEnd={(e) => {
finalPosition = e.changedTouches[0].clientX;
swipeMove();
}}
>
<img
id={"image-0"}
className={
"absolute inset-x-1/2 transform -translate-x-1/2 inset-y-1/2 -translate-y-1/2 transition-opacity duration-1000 max-w-full max-h-full"
}
src={images[0].imageUrl}
alt={images[0].alt}
/>
{images.map((image: {}, index: number) =>
index == 0 ? (
""
) : (
<img
key={index}
className={
"absolute inset-x-1/2 transform -translate-x-1/2 inset-y-1/2 -translate-y-1/2 max-h-full max-w-full transition-opacity duration-1000"
}
style={{ opacity: "0" }}
id={`image-${index}`}
src={image.imageUrl}
alt={image.alt}
/>
)
)}
</div>
<div
className={"hidden items-center text-center cursor-pointer sm:flex"}
onClick={() => increaseIndex()}
>
<img src={rightarrow.src} width={50} />
</div>
</div>
<div
className={
"w-full h-[60px] flex justify-center sm:h-[80px] md:h-[100px]"
}
>
<div className={"flex p-[10px]"}>
<div
className={"flex items-center text-center cursor-pointer mr-[10px]"}
onClick={() => decreaseIndex()}
>
<img src={leftarrow.src} width={30} />
</div>
<div className={"flex"}>
{(currentIndex > 1
? images.slice(currentIndex - 2, currentIndex)
: images
.slice(images.length - 2 + currentIndex)
.concat(images.slice(0, currentIndex))
).map((image: {}, index: number) =>
currentIndex == images.indexOf(image) ? (
""
) : (
<img
key={index}
className={"max-h-full mx-[5px] cursor-pointer"}
onClick={() => changeToImage(images.indexOf(image))}
src={image.imageUrl}
alt={image.alt}
/>
)
)}
</div>
<div>
<img
className={"max-h-full mx-[5px] cursor-pointer"}
style={{ outline: "solid silver 3px" }}
src={images[currentIndex].imageUrl}
alt={images[currentIndex].alt}
/>
</div>
<div className={"flex"}>
{(currentIndex < images.length - 2
? images.slice(currentIndex + 1, currentIndex + 3)
: images
.slice(currentIndex + 1, images.length)
.concat(images.slice(0, currentIndex - images.length + 3))
).map((image: {}, index: number) =>
currentIndex == images.indexOf(image) ? (
""
) : (
<img
key={index}
className={"max-h-full mx-[5px] cursor-pointer"}
onClick={() => changeToImage(images.indexOf(image))}
src={image.imageUrl}
alt={image.alt}
/>
)
)}
</div>
<div
className={"flex items-center text-center cursor-pointer ml-[10px]"}
onClick={() => increaseIndex()}
>
<img src={rightarrow.src} width={30} />
</div>
</div>
</div>
</div>
) : (
<div />
);
}
在几个地方你有.map((image: {}, index: number) => ... )，我认为正在发生的事情是image被解构成一个空对象，从中你不使用任何值。试着这样做，可能会有帮助:.map((image, index) => ... )