在useEffect中使用async/await时，如何处理@typescript-eslint/no-floating-promises？

我有一个基于TypeScript和ESLint的小型React项目，页面加载时通过useEffect发起fetch请求填充表格数据。请求本身能正常执行，但ESLint在调用fetchSsidWhitelist()的位置抛出错误：

"Promises must be awaited, end with a call to .catch, end with a call to .then with a rejection handler or be explicitly marked as ignored with the void operator. (eslint@typescript-eslint/no-floating-promises)"

我知道可以用void关键字或者Promise链式调用（如下方两个选项）消除错误，但不理解为什么必须这么做。另外，如果必须处理未捕获的Promise且要使用.catch，能不能只使用async/await语法，不混合链式调用？

ESLint错误示例代码 #

useEffect(() => {
    const fetchSsidWhitelist = async () => {
        try {
            const response = await fetch('/Admin/whitelisting/ssid-whitelist');

            if (!response.ok) {
                setShowErrorMessage(true);
                throw new Error(await response.text());
            }

            const data: SsidWhitelist[] = (await response.json()) as SsidWhitelist[];

            setResults(data);
        } catch (error) {
            console.log('An error occurred during the fetch: ', error);
        }
    };

    fetchSsidWhitelist()
}, []);

选项1：通过Promise链式调用添加catch #

fetchSsidWhitelist()
    .catch((error) => console.log(error));

选项2：使用void标记忽略Promise #

void fetchSsidWhitelist()

更新：我采纳了@Jahedule Hoque的建议，将data变量类型改为SsidWhitelist[]（之前错误设为Promise类型），但仍未解决原有的浮动Promise错误。

内容的提问来源于stack exchange，提问作者Matt