I am facing an issue while rendering a dynamic page in NEXT.JS. While clicking on a list-item DOES redirect me to the detail-page, the data in the detail page is still not available.

I am fetching the poData in the detail-page, and if i try to log it in console, it works perfectly and logs out all the keys inside it.

However, when i try to render the individual keys in poData, for example poData.refId, an error is thrown saying that can't read refId of undefined. (line 30)

(refId is also the pageId used in redirection which proves the data is valid) This doesn't make sense bcz in line 29 the poData is logged on screen and doesn't throw the error.

Also, if i just log the poData without trying to access the nested data in the object, i am able to see the object containing all the nested data when it is logged on screen.

Redux Slice Code:

import { createSlice } from "@reduxjs/toolkit";
import purchaseOrdersDb from '../../db/purchaseOrders'

const initialState = [
];

const poSlice = createSlice({
  name: "po",
  initialState,
  reducers: {

    addPO(state, action) {
      // Check PO List for duplicates
      const duplicateIndex = state.findIndex(el => el.refId === action.payload.refId)
      // Add the new PO
      duplicateIndex < 0 ? state.push(action.payload) : console.log(`Duplicate Found`);;
    },

  },
});

export const poActions = poSlice.actions;
export default poSlice;

Component Code:

/* Next Functions */
export async function getStaticPaths() {
  return {
    paths: [
      { params: { refId: '1' } }
    ],
    fallback: 'blocking'
  }
}

export async function getStaticProps(context) {
  const pid = context.params.refId;
  return {
    props: {
      pid
    }
  }
}

/* Page Component Function */
export default function POdetail(props) {

  const poData = useSelector(state => { return state.po.find(item => item.refId === props.pid) })

  poData && console.log(poData);
  poData.refId && console.log(poData.refId);

  return (
    <>
      <h1>{poData.refId} </h1>
    </>
  )
}