Property ‘xxxxxx’ does not exist on type ‘T | undefined’. のエラーの消し方

7月 17, 2022

Contents

1. 動作環境
2. エラーの状況
3. 解決方法
- 3.1. // @ts-ignore をつける
- 3.2. :anyをつける
4. 感想

動作環境

typescript@4.7.4
VSCode
react@18.2.0
next@12.2.2

エラーの状況

このサイトのコードをコピペして実行しようと思ったら、タイトルのエラーが出ました。エラーの出た箇所は以下のコードの14行目の{ posts }のところです。

import Link from 'next/link';
import { useQuery } from '@apollo/client';
import { POSTS_QUERY, PostsData } from '../../src/graphql/queries/posts.query';
import { NextPage } from 'next';

interface PostsListProps {}

const PostsList: NextPage<PostsListProps> = () => {
  const { loading, error, data } = useQuery<PostsData>(POSTS_QUERY);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {JSON.stringify(error)}</p>;

  const {posts} = data;
  if (!posts) return null;

とりあえず: anyをつけとけば回避できるだろうと考えたが、エラーは消えない。