typescript+Reactで「Line 0: Parsing error: Cannot read property 'map' of undefined」

Question

ReactとJSを使って作成したアプリをts migrateを使って、TypeScriptに置き換えていたのですが、App.tsxというファイルで以下の様なエラーが発生しました。

Line 0: Parsing error: Cannot read property 'map' of undefined

以下はApp.tsxです。

import React, { useState, useEffect, useCallback} from 'react';
import './assets/styles/style.css';
import {AnswersList, Chats} from './components/index';
import FormDialog from './components/Forms/FormDialog';
import {db} from './firebase/index';

const App = () => {
  const [answers, setAnswers] = useState([]);
  const [chats, setChats] = useState([]);
  const [currentId, setCurrentId] = useState("init");
  const [dataset, setDataset] = useState({});
  const [open, setOpen] = useState(false);

  interface Dataset {
    "answers": Array<Answer>,
    "question": string
  }

  interface Answer {
    "answers": [
      {"content": string, "nextId": string}
    ]
  }


  const displayNextQuestion = (nextQuestionId: string, nextDataset: Dataset) => {
    addChats({
      text: nextDataset.question,
      type: 'question'
    })

      setAnswers(nextDataset.answers)
      setCurrentId(nextQuestionId)
  }

  const selectAnswer = (selectedAnswer: any, nextQuestionId: any) => {
    switch(true) {
      case (nextQuestionId === 'contact'):
          handleClickOpen()
          break;
      
      case (/^https:*/.test(nextQuestionId)):
          const a = document.createElement('a');
          a.href = nextQuestionId;
          a.target = '_blank';
          a.click();
          break;

      default:
          addChats({
              text: selectedAnswer,
              type: 'answer'
          })
        setTimeout(() => displayNextQuestion(nextQuestionId, dataset[nextQuestionId]), 500) 
        break;
    }
  }

  const addChats = (chat: any) => {
    setChats((prevState) => {
      return [...prevChats, chat]
    })
  }

  const handleClickOpen = () => {
    setOpen(true)
  };

  const handleClose = useCallback(() => {
      setOpen(false)
  }, [setOpen]);


  useEffect(() => { 
    (async() => {
      const initDataset = {};

      await db.collection('questions').get().then(snapshots => {
        snapshots.forEach(doc => {
          const id = doc.id
          const data = doc.data()
          initDataset[id] = data
        })
      })

      setDataset(initDataset)
      displayNextQuestion(currentId, initDataset[currentId])
    })()
  }, [])

  useEffect(() => {
      const scrollArea = document.getElementById('scroll-area')
      if (scrollArea) {
        scrollArea.scrollTop = scrollArea.scrollHeight
      } 
  })
  
  return(
    <section className="c-section"> 
      <div className="c-box">
        <Chats chats={chats} />
        <AnswersList answers={answers} select={selectAnswer} />
        <FormDialog open={open} handleClose={handleClose} />
      </div>
    </section>
  );
}

export default App;

以下はpackage.jsonです。

{
  "name": "chatbot",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/system": "^4.11.2",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@typescript-eslint/eslint-plugin": "^4.9.0",
    "@typescript-eslint/parser": "^4.9.0",
    "firebase": "^7.24.0",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-scripts": "3.4.3"
  },
  "resolutions": {
    "@typescript-eslint/eslint-plugin": "^4.1.1",
    "@typescript-eslint/parser": "^4.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {},
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "ts-migrate": "^0.1.10"
  }
}

エラーについて調べていると、このページが見つかったので参考にしつつ試してみたのですが変わらず。。

ちなみに試したのは以下の通りです。

• node_modulesファイルを削除して再度npm install
• @typescript-eslint/eslint-pluginと@typescript-eslint/parserのインストール

ちなみに、App.tsxのinterface Datasetやinterface Answerの記述を消すと該当のエラーは消えます。が、別の型のエラーが起こります。

ググってもいい感じのヒントになりそうな情報が得られなかったため、質問させていただきました。

この、Line 0: Parsing error: Cannot read property 'map' of undefinedの原因など含め教えていただけると幸いです。

追記

parsing errorは解決したものの、以下のエラーが起こりました。

Argument of type 'Answer[]' is not assignable to parameter of type 'SetStateAction<never[]>'.
  Type 'Answer[]' is not assignable to type 'never[]'.
    Type 'Answer' is not assignable to type 'never'.  TS2345

該当箇所は、App.tsxファイル内のdisplayNextQuestionのsetAnswers(nextDataset.answers)部分です。

Comments

[maisumakun]

当該のエラーはコンパイル時と実行時のどちらで発生したものでしょうか？

Answer 1

App.tsxのinterface Datasetやinterface Answerの記述を消すと該当のエラーは消えます。

型宣言を関数内で行うことは通常しませんので、それらをAppより手前に引き出してみたらどうなりますでしょうか？

interface Dataset {
  "answers": Array<Answer>,
  "question": string
}

interface Answer {
  "answers": [
    {"content": string, "nextId": string}
  ]
}

const App = () => { // 後略

Comments

[kobaryo04ysh]

回答ありがとうございます！
試してみたところ、質問内容に追記した通りのエラーが起こりました。

一応、Parsing errorは解決しました。