Next.js页面跳转时出现TypeError: Cannot read 'pagenum'属性问题求助

错误信息 #

3个未处理错误中的1个
未处理运行时错误 TypeError: Cannot read properties of undefined (reading 'pagenum')
错误来源：pages\dpt[dptid]\rewayat[rewid][subrewid]\surah[surahid]\p[pid].js (89:36) @ Page

imag = /image/${dptid}/${rewid}/${subrewid}/${surahid}/${pid}.png;
pagenum = surahs[surah${surahid}].pagenum;
^
console.log(pagenum);
page = surahs[surah${surahid}].page;

92 |

用户代码片段 #

核心逻辑代码 #

const router = useRouter()
const pid = router.query.pid;
const rewid = router.query.rewid;
const dptid = router.query.dptid;
const subrewid = router.query.subrewid
const surahid = router.query.surahid

let imag;
let aud;

let pagenum;
let page;
let surahs = {};

surahs = {
  surah1: {
    page : "1",
    pagenum: "1",
    surahname: "الفاتحة",
},
surah2: {
  page : 2,
    pagenum: 3,
    surahname: "البقرة",
    
},
surah19: {
    page : "305",
    pagenum: "1",
    surahname: "مريم",
    
}
}
imag = `/image/${dptid}/${rewid}/${subrewid}/${surahid}/${pid}.png`;

pagenum = surahs[`surah${surahid}`].pagenum;
console.log(pagenum);
page = surahs[`surah${surahid}`].page;

aud = `/sound/${rewid}/${subrewid}/19/${pid}.mp3`;

抽屉组件代码 #

<Drawer className='font-el-messiri text-center' title="اختر الصفحه" placement="bottom" height={"500px"}  width={"300px"} size="default" onClose={onClose1} open={open1}>
  <div className=' flex flex-col justify-center items-center'>
    {pages}
  </div>
</Drawer>

问题分析 #

报错本质是surahs[surah${surahid}]返回undefined，导致无法读取pagenum属性，触发场景包括：

• Next.js页面初始化时，路由参数surahid还未加载完成
• 跳转的surahid对应的值未在surahs对象中定义（比如跳转至surah3，但对象仅包含surah1、surah2、surah19）
• 代码执行时机过早，未等路由参数就绪就访问对象属性

解决方案 #

1. 添加属性校验与默认值 #

在读取属性前先校验目标surah是否存在，避免直接访问undefined的属性：

const router = useRouter()
const pid = router.query.pid || '';
const rewid = router.query.rewid || '';
const dptid = router.query.dptid || '';
const subrewid = router.query.subrewid || '';
const surahid = router.query.surahid || '';

let imag;
let aud;
let pagenum;
let page;

const surahs = {
  surah1: {
    page: "1",
    pagenum: "1",
    surahname: "الفاتحة",
  },
  surah2: {
    page: 2,
    pagenum: 3,
    surahname: "البقرة",
  },
  surah19: {
    page: "305",
    pagenum: "1",
    surahname: "مريم",
  }
}

// 先获取当前surah对象，存在再读取属性
const currentSurah = surahs[`surah${surahid}`];
if (currentSurah) {
  pagenum = currentSurah.pagenum;
  page = currentSurah.page;
  console.log(pagenum);
} else {
  // 处理未找到的情况，设置默认值或提示
  pagenum = '0';
  page = '0';
  console.warn(`surah${surahid} 未在surahs对象中定义`);
}

imag = `/image/${dptid}/${rewid}/${subrewid}/${surahid}/${pid}.png`;
aud = `/sound/${rewid}/${subrewid}/19/${pid}.mp3`;

2. 等待路由参数就绪 #

利用useEffect监听路由参数变化，确保参数完全加载后再执行逻辑：

import { useEffect, useState } from 'react';
const router = useRouter()

// 用状态管理变量，避免直接操作全局变量
const [pagenum, setPagenum] = useState('');
const [page, setPage] = useState('');
const [imag, setImag] = useState('');
const [aud, setAud] = useState('');

const surahs = {
  surah1: {
    page: "1",
    pagenum: "1",
    surahname: "الفاتحة",
  },
  surah2: {
    page: 2,
    pagenum: 3,
    surahname: "البقرة",
  },
  surah19: {
    page: "305",
    pagenum: "1",
    surahname: "مريم",
  }
}

useEffect(() => {
  // 确保所有路由参数都存在
  const { pid, rewid, dptid, subrewid, surahid } = router.query;
  if (pid && rewid && dptid && subrewid && surahid) {
    const currentSurah = surahs[`surah${surahid}`];
    
    if (currentSurah) {
      setPagenum(currentSurah.pagenum);
      setPage(currentSurah.page);
    } else {
      setPagenum('0');
      setPage('0');
      console.warn(`surah${surahid} 未找到`);
    }
    
    setImag(`/image/${dptid}/${rewid}/${subrewid}/${surahid}/${pid}.png`);
    setAud(`/sound/${rewid}/${subrewid}/19/${pid}.mp3`);
  }
}, [router.query]); // 监听路由参数变化

3. 补全surahs对象条目 #

如果导航栏需要支持所有surah页面跳转，需将所有surah对应的键值对添加到surahs对象中，避免出现键不存在的情况。

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