我正在使用 React 和 graphql 获取数据，并使用 react/pdf-renderer 进行渲染。

我使用 renderContent，但它给了我这个错误。我做错了什么？

Uncaught TypeError: Cannot read properties of undefined (reading 'bookingConfirmationNumber')at renderContent

下面是我的代码

const renderContent = () => {
    const hotelDetails: HotelDetailsType = data.getHotelDetailsByIds.items[0]

    return (
      <PDFViewer>
        <Document>
          console.log(hotelDetails.bookingConfirmationNumber)
          <Page>

            <View>
                <Text>{hotelDetails.bookingConfirmationNumber}</Text>
                <Text>{hotelDetails.hotelName}</Text>
                <Text>{hotelDetails.address}</Text>
                <Text>{hotelDetails.hotelContactNumber}</Text>
                <Text>{hotelDetails.guestName}</Text>
                <Text>{hotelDetails.guests.adults}</Text>
                <Text>{hotelDetails.guests.children}</Text>
            </View>
          </Page>
        </Document>
      </PDFViewer>      
  )}

这是我的架构

export type HotelDetailsType = {
  bookingConfirmationNumber: string
  hotelName: string
  address: string
  hotelContactNumber: string
  guestName: string
  guests: HotelGuestsType
}

我尝试了可选链接，它呈现了 PDF 组件，但未获取数据，查询在 Graphql 中运行良好。非常感谢任何输入和资源。

谢谢。

更新：

hotelDetails 确实发送了未定义。但我仍然不知道为什么。如果我直接在 graphql 中查询，它可以正常工作。请参阅以下附加信息。

const InvoicePDFModal: React.FC<InvoicePDFModalProps> = ({ hideModal, hotelBookingId }) => {
  const profile = useSelector(selectedCustomerProfileSelector)
  const { data, loading, error } = useQuery(GET_HOTEL_DETAILS_BY_IDS, {
    variables: {
      hotelDetailIds: [hotelBookingId],
      customerId: profile.userId
    }
  })

Graphql snip https://i.sstatic.net/Im9z0.jpg

非常感谢大家的帮助。非常感谢。