데이터 전달에 관하여~!

초기에 데이터를 받아올때 아래와 같은 경우가 있을때 하위컴포넌트에서 post.comment.id 라는 값을 사용한다고 했을때 데이터를 받아오는 중에는 post 초기값이 빈배열이라서 post.comment.id 값이 id 값이라서 undefined 값이 뜨는 경우가 있는데 이때 1. post 값을 받아오기 전까지 아예 컴포넌트를 랜더링을 막아야하는지 2. 혹은 post.comment? 와 같이 옵셔널 체이닝을 다 걸어줘여하는지 3. 아니면 post 의 초기값을 comment 깊이까지 정의해줘야하는지 궁금합니다. 어떤방법이 좋을까요?...

posts : [ {
    id: 1,
    title: 2,
    comment: []
}, {
    id: 1,
    title: 2,
    comment: []
}
1.page
posts.map((post) => (<Component key={post.id} post={post}>))

2.Component
<test>{post.comment.id}<test/>