Next.js (React) + typescript + axios で Property 'xxx' does not exist on type 'never'.

エラー

Property 'title' does not exist on type 'never'.
Property 'body' does not exist on type 'never'.

と言われる

コード例

import React, {useState, useEffect} from 'react'

function AxiosGet() {
  const baseURL = "https://jsonplaceholder.typicode.com/posts/1";
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(baseURL).then((response) => {
      setPost(response.data);
    });
  }, []);

  if (!post) return null;

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

解決

プロパティではなくハッシュの値として書くととりあえず回避できた
たぶん本来であれば型を正しく指定したりする必要があるかも

  return (
    <div>
      <h1>{post['title']}</h1>
      <p>{post['body']}</p>
    </div>
  );

参考

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

Twitter