Next.js中使用getServerSideProps出现无法读取page属性的TypeError求助

出现这个错误的核心原因是data对象为undefined，导致无法读取data.page。以下是针对性的排查和修复步骤：

1. 修复fetch函数中的变量冲突与错误处理 #

你的getLikedArtwork函数存在变量名重复问题，且缺少错误捕获逻辑，可能导致请求失败时返回undefined：

const getLikedArtwork = async (userID: string, page: number) => {
  try {
    // 避免变量名重复，改用fetchResponse命名
    const fetchResponse = await fetch(`http://${api}/likedArtwork?page=${page.toString()}&userID=${userID}`);
    // 检查HTTP响应状态，确保请求成功
    if (!fetchResponse.ok) {
      throw new Error(`请求失败：${fetchResponse.status}`);
    }
    const responseData: LikedListRes = await fetchResponse.json();
    return responseData;
  } catch (error) {
    console.error('获取收藏作品失败:', error);
    // 返回默认值，确保不会返回undefined
    return { LikedArtwork: [], page: 0 };
  }
}

2. 确认动态路由参数的正确性 #

如果你的页面路由文件是[userId].tsx而非[id].tsx，那么params.id会是undefined，导致请求的userID无效，后端可能返回错误数据：

// 假设路由文件是[userId].tsx，修改参数键名匹配路由
const res = await getLikedArtwork(params?.userId as string, 0);

3. 给组件props添加默认值 #

即使请求出现异常，也能保证组件有默认数据可用，避免报错：

const Account: NextPage<{data: LikedListRes}> = ({data = { LikedArtwork: [], page: 0 }}) => {
  return (
    <Grid container spacing={2}>
      <Grid xs={4} sm={4} md={4} lg={4}></Grid>
      <Grid xs={8} sm={8} md={8} lg={8}>
        <Box sx={{margin: 'auto'}}>
          <LikedArtworks page={data.page} likedArtwork={data.LikedArtwork} />
        </Box>
      </Grid>
    </Grid>
  )
}

4. 验证fetch返回数据 #

在getServerSideProps中添加日志，确认返回的res是否符合LikedListRes类型：

const res = await getLikedArtwork(params?.id as string, 0);
console.log('获取到的数据:', res); // 在服务器控制台查看输出
return { props: { data: res } };

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