配列に含まれるnullかundefinedを取り除いた配列を生成したい

Question

前提・該当のソースコード

ReactとTypeScriptとFirebaseを使っています。
datasコレクションからデータを取得する際、ドキュメントに含まれるuidからユーザー情報も取得し、データ情報とユーザー情報をオブジェクトにまとめた配列を生成しています。

type UserType = {
  uid: string;
  name: string;
}
type DataType = {
  dataID: string;
  dataUser: User;
}

cosnt [datas, setDatas] = useState<DataType[]>([]);
useEffect(() => {
  const loadDatas = async () => {
    const currentApp = getApp();
    const db = getFirestore(currentApp);
    const dataRef = doc(collection(db, "datas"));
    const dataDocs= await getDocs(dataRef);
    const dataRaws = await Promise.all(
      dataDocs.docs.map(async (doc) => {
        const data = doc.data();
        const { dataID } = data;
        const dataUserRef = doc(collection(db, "users"), dataID);
        const dataUserDoc = await getDoc(dataUserRef).catch((err) => {
          console.log(err);
          return null;
        });
        if (!dataUserDoc || !dataUserDoc.exists()) return;
        const dataUser = dataUserDoc.data() as UserType;
        const dataObj: DataType = {
          dataID: dataID,
          dataUser: dataUser,
        };
        return dataObj;
      })
    );
    if (dataRaws.length > 0) setDatas(dataRaws);
  };
  loadDatas();
}, []);

発生している問題・エラーメッセージ

Array.map処理の中で「ユーザー情報のgetに失敗した場合はnullを返してその値の処理をスルーする」という処理を書いているため、VSCodeはdataRawsの型を以下のように推論します。

dataRaws: (DataType | undefined)[]

そのため、setDatas(dataRaws)に対してVSCodeに下記の内容で怒られます。

型 '(DataType | undefined)[]' の引数を型 'SetStateAction<DataType[]>' のパラメーターに割り当てることはできません。
型 '(DataType | undefined)[]' を型 'DataType[]' に割り当てることはできません。
型 'DataType | undefined' を型 'DataType' に割り当てることはできません。
型 'undefined' を型 'DataType' に割り当てることはできません。
ts(2345)

実現したいこと

dataRawsからundefinedを取り除き、DataTypeだけが格納された配列をsetStateしたいです。

試したこと

JavaScriptにおける配列の空要素除去filterパターン - Qiita

上記ページで紹介されている3パターンを試してみました。

if (dataRaws.length < 1) return;
const deleteUndfiedDataRaws = dataRaws.filter(data => data);
// const deleteUndfiedDataRaws = dataRaws.filter(data => !!data);
// const deleteUndfiedDataRaws = dataRaws.filter(Boolean);
setDatas(deleteUndfiedDataRaws);

しかしVScodeは変わらず、deleteUndfiedDataRawsの型を下記のように推論します。

deleteUndfiedDataRaws: (DataType | undefined)[]

Answer 1

しかしVScodeは変わらず、deleteUndfiedDataRawsの型を下記のように推論します。

取るべき手段は2つに1つです。

• as DataType[]として型を切り替える
• (data: DataType | null): data is DataType => !!dataのように、filterに使う関数に型を付与する