React Chakra UI应用点击Link报错：Cannot read properties of undefined (reading 'slice')

使用Chakra UI开发React前端，已成功集成后端且数据可正常获取。但点击Link组件导航时会出现错误，刷新页面或手动在地址栏输入URL时功能正常。仅点击首页链接按钮、照片分类链接按钮等特定链接时会触发错误，错误提示为“Cannot read properties of undefined (reading 'slice')”，曾解决过该问题但它再次出现。

相关代码如下：

export default function LookAround() {
    const gray = useColorModeValue("gray.600", "gray.300")
    const { isLoading, data } = useQuery<{ photos: IHome[]; texts: IHome[]; videos: IHome[] }>(
    ["photos"],
    HomeLook
    );
    
    if (isLoading) {
        return <div>Loading...</div>; // 로딩 중일 때 표시할 UI
    }
    
    if (!data) {
    return <div>No data available</div>; // 데이터가 없을 때 표시할 UI
    }

    
    return (
        <>
        <VStack>
            <Box w="100%">
                <Link to={"/api/v1/photos"}>
                    <HStack alignItems={"flex-start"} ml={16} mt={8} mb={6}>
                        <Text color={gray} fontWeight={"bold"} fontSize={24}>사진 둘러보기</Text>
                        <IconButton color={gray} fontSize={20} aria-label="more follower's photos" variant={"unstyled"} icon={<FaAngleDoubleRight />} disabled={isLoading} />
                    </HStack>
                </Link>
            </Box>
            
            <Box mr={10} pl={14} w="100%" h="35rem" overflow={"auto"} overflowX={"scroll"} css={{'&::-webkit-scrollbar': { display:"none"}}}>
                <Grid gap={10} gridAutoFlow={"column"} gridTemplateColumns="repeat(6, 1fr)" gridTemplateRows="repeat(2, 1fr)">
                {data.photos.slice(0, 14).map((home) => (
                <LookHomePhoto photo={home.photo} pk={home.pk} key={home.pk} /> // photo와 pk prop을 전달
                ))}
                </Grid>
            </Box>
        </VStack>
        </>
    )
}

interface IPhotoProps {
    photo: string;
    pk:number;
}

const LookHomePhoto: React.FC<IPhotoProps> = ({ photo, pk }) =>{
    return (
        <>
        <Link to={`api/v1/photos/${pk}`}>
            <Box w={60} h={60} backgroundColor="gray">
                <Image objectFit={"cover"} w={60} h={60} src={photo}/>
            </Box>
        </Link>
        </>
    )
}

export default LookHomePhoto;

• 修正Link路径为绝对路径
  错误核心是导航到了错误路由，导致目标页面无法正确获取数据，data.photos变为undefined后调用slice报错。LookHomePhoto组件中的Link使用了相对路径，会基于当前页面路径拼接（比如当前在/home，点击后会跳转到/home/api/v1/photos/${pk}），而非预期的根路径路由。
  修改代码：

  // 将相对路径改为绝对路径
  <Link to={`/api/v1/photos/${pk}`}>
  

• 完善所有页面的数据校验逻辑
  检查目标页面（比如/api/v1/photos列表页、/api/v1/photos/${pk}详情页）的代码，确保在数据加载完成前不执行依赖数据存在的操作，必须保留加载状态和空数据判断：

  if (isLoading) {
      return <div>Loading...</div>;
  }
  
  if (!data?.photos) { // 增加对photos数组的存在性判断
      return <div>No photos available</div>;
  }
  

• 优化useQuery缓存配置（可选）
  若问题复发，可能是缓存失效导致页面导航时重新请求数据出现竞态。给useQuery添加缓存配置，延长数据新鲜时间：

  const { isLoading, data } = useQuery<{ photos: IHome[]; texts: IHome[]; videos: IHome[] }>(
      ["photos"],
      HomeLook,
      { staleTime: 5000 } // 5秒内数据视为新鲜，避免频繁重新请求
  );
  

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