I’m receiving this error when moving to another page in next js

1 of 3 unhandled errors

Unhandled Runtime Error TypeError: Cannot read properties of undefined
(reading ‘pagenum’)

Source
pages\dpt[dptid]\rewayat[rewid][subrewid]\surah[surahid]\p[pid].js
(89:36) @ Page

87 | imag =
/image/${dptid}/${rewid}/${subrewid}/${surahid}/${pid}.png; 88 |

89 | pagenum = surahs[surah${surahid}].pagenum;
| ^ 90 | console.log(pagenum); 91 | page = surahs[surah${surahid}].page;
92 |

my code :

  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>

i think it is something wrong with const surahs

im expecting the navbar moves to any page without this error

>Solution :

Seems like surahs[surah${surahid}] returning null. make sure surahid has a matching value in the object or add the optional operator

pagenum = surahs[`surah${surahid}`]?.pagenum;