如何获取Checkbox选中值存入Firestore，解决TypeError: s.indexOf报错

• 你提交到Firestore的是{选项名: 布尔值}格式的对象，报错TypeError: s.indexOf is not a function是因为你用到的逻辑或Firestore规则预期接收数组格式的选中项，对象本身没有indexOf方法，因此触发类型错误。
• 你直接对React状态执行delete操作属于直接修改原状态，违反React状态不可变原则，会导致异常渲染问题。
• 初始state的键名（Fever、Headache等）和Checkbox组件的name属性（Item1、Item2等）不匹配，会导致勾选状态绑定失效。

1. 对齐初始state的键名和Checkbox的name属性
2. 提交时筛选出所有勾选状态为true的选项，组成数组后再存入Firestore
3. 给Firestore的异步写入操作添加await，确保异常能被正常捕获

const Component = (props) => {
  // 修正初始state键名，和Checkbox的name保持一致
  const [state, setState] = useState({
    Item1: false,
    Item2: false,
    Item3: false,
    "Muscle Pain": false,
  });
  const handleCheckbox = (event) => {
    console.log(event.target.value);
    setState({ ...state, [event.target.name]: event.target.checked });
  };

  // 添加async标识支持await
  const handleSubmit = async (e) => {
    e.preventDefault();
    // 筛选出选中的选项组成数组，不直接修改原state
    const selectedItems = Object.entries(state)
      .filter(([item, isChecked]) => isChecked)
      .map(([item]) => item);
    
    // 如果需要打印你期望的换行格式，执行下面的代码即可
    // console.log(selectedItems.join('\n'));

    try {
      const userRef = firestore.collection("users").doc(uid);
      // 存储选中项数组，而非原布尔值对象
      await userRef.set({
        selectedItems,
      });
      console.log(" saved");
    } catch (err) {
      console.log(err);
    }

  };

  return (
    <Container>
      <form onSubmit={handleSubmit}>
          <FormGroup style={{ alignContent: "center", padding: "1rem" }}>
            <FormControlLabel
              control={
                <Checkbox
                  checked={state.Item1}
                  name="Item1"
                  color="primary"
                  value="Item1"
                  onChange={handleCheckbox}
                />
              }
              label="Item1"
            />
            <FormControlLabel
              control={
                <Checkbox
                  checked={state.Item2}
                  name="Item2"
                  color="primary"
                  value="Item2"
                  onChange={handleCheckbox}
                />
              }
              label="Item2"
            />
            <FormControlLabel
              control={
                <Checkbox
                  checked={state.Item3}
                  name="Item3"
                  color="primary"
                  value="Item3"
                  onChange={handleCheckbox}
                />
              }
              label="Item3"
            />
            <!-- 如有Muscle Pain选项可自行补充对应的Checkbox组件 -->
          </FormGroup>
          <Button type="submit">Submit</Button>
        <br />
      </form>
    </Container>
  );
};

export default Component;

修改后存储到Firestore的字段selectedItems就是你需要的选中项数组，符合预期格式，也不会再触发indexOf相关的类型错误。

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